如何实现CSS Grid模板响应式适配，800px以下所有区块单列排布

问题根因 #

你当前的配置无法实现800px以下单列布局的原因有两点：

1. 你仅在断点下修改了Grid容器的列模板，但A/B/C三个区块原有的grid-column: span N规则仍然生效，当容器列数小于元素跨列数值时，Grid布局会自动生成额外列来满足跨列要求，最终导致布局错乱。
2. 原有断点使用的repeat(auto-fit, minmax(200px, 1fr))配置，在窗口宽度大于400px时仍会生成2列，不符合小于800px全单列的需求。

解决方案 #

仅需要调整媒体查询内的代码即可，不会修改你标记为不可修改的原有属性：

@media (max-width:800px){
  .wrapper{
    /* 强制容器为单列布局 */
    grid-template-columns: 1fr;
  }
  /* 覆盖三个区块的跨列规则，适配单列布局 */
  .a, .b, .c {
    grid-column: span 1;
  }
}

完整可运行代码 #

CSS部分

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  /* 该CSS属性不可修改 */
  grid-template-columns: repeat(6, 1fr);
  /* 该CSS属性不可修改 */
  grid-gap: 10px;
}
 @media (max-width:800px){
  .wrapper{
    grid-template-columns: 1fr;
  }
  .a, .b, .c {
    grid-column: span 1;
  }
}

/* 该CSS属性不可修改 */
.a{
  grid-column: span 3; 
}
.b{
  grid-column:span 3;
}
.c{
  grid-column: span 6
}
/* 该CSS属性不可修改 */
.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

HTML部分

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>

内容的提问来源于stack exchange，提问作者pannu sharma