CSS网格换行符

Question

我正在尝试实现一个CSS网格模板，该模板的行为应如下：

在桌面上，它应该看起来像这样

对于平板电脑，

和移动

我使用网格和模板区域实现，但平板电脑有问题。要求是，如果B中的内容不能容纳50％的空间，那么应该有一个换行符，以便B将占据100％的空间，而C将被压入移至第三行（与移动设备一样）

我不确定网格是否可以做到这一点。我尝试使用auto-fit和auto-fill属性，但没有找到任何地方。

希望你能帮助我

Answer 1

CSS网格+媒体查询可以完成这项工作：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container div {
  border: 1px solid red;
}

.a {
  grid-column-start: 1;
  grid-column-end: 2;
}

.b {
  grid-column-start: 1;
  grid-column-end: 2;
}

.c {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

@media only screen and (max-width: 700px) {
  .a {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .c {
    grid-row-start: 2;
  }
}

@media only screen and (max-width: 400px) {
  .container {
    grid-template-columns: 300px;
  }

  .a {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .c {
    grid-column-start: 1;
    grid-row-start: 3;
  }
}

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