html - 我如何制作响应式网格模板

Question

这是我尝试过的 jsFiddle 链接：https ://jsfiddle.net/bw0etr21/

有三个块A, B, C. 我在这些块上应用了一些网格属性。 A，B排C在最后。我需要让它响应。

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

.wrapper {
  display: grid;
  /* we can`t change this css property */
  grid-template-columns: repeat(6, 1fr);
  /* we can`t change this css property */
  grid-gap: 10px;
}
 @media (max-width:800px){
  .wrapper{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* we can`t change this css property */
.a{
  grid-column: span 3; 
}
.b{
  grid-column:span 3;
}
.c{
  grid-column: span 6
}
/* we can`t change this css property */
.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

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

当我们将窗口大小减小到 800 像素以下时，输出应该是一列中的所有块。

所需的输出应该像这个图像链接。https://i.ibb.co/Mck9vJx/required-output.png

如果有更多信息，请告诉我。必需的。谢谢你。

标签： htmlcsscss-grid