如何让 grid-item 占据整条线？

Question

我正在学习网格系统，想知道如何让一些 grid-item 占用剩余的单元格？

我有这 3 个状态：

桌面
手机
没有绿色的手机

我刚刚设置为桌面：

grid-template-columns: repeat(3, 1fr)

工作正常。对于移动设备，我重置了上面的代码并对第一个元素执行

grid-column: 1 / span 2

然后在第二个选项中接收什么但是当涉及到绿色块的可选外观时，我得到这样的结果：

所以不是第三个选项

蓝色方块只占一半
我尝试了很多网格，但没有得到我想要的结果。
使用 flexbox 我可以轻松地使用 flex-basis 和 flex-grow 属性，但是使用网格我注定要传递一些额外的 class，例如 block__elem--without-green 和设置grid-column: 1/span2由蓝色方块

Answer 1

此代码段利用了 CSS 网格模板区域属性。

设置三个div分别在网格区域A、B、C。

他们的容器根据选项 1、2 或 3 具有不同的布局。

对于第三个布局，第二个 div 只是不显示。

.container {
  width: 100vmin;
  height: 30vmin;
  display: grid;
}

.container.one {
  grid-template-areas: 'A B C' 'A B C';
}

.container.two {
  grid-template-areas: 'A A' 'B C';
}

.container.three {
  grid-template-areas: 'A' 'C';
}

.container :nth-child(1) {
  border: red solid 1px;
  grid-area: A;
}

.container :nth-child(2) {
  border: green solid 1px;
  grid-area: B;
}

.container :nth-child(3) {
  border: blue solid 1px;
  grid-area: C;
}

.container.three :nth-child(2) {
  display: none;
}

<h2>ONE</h2>
<div class="container one">
  <div></div>
  <div></div>
  <div></div>
</div>
<h2>TWO</h2>
<div class="container two">
  <div></div>
  <div></div>
  <div></div>
</div>
<h2>THREE</h2>
<div class="container three">
  <div></div>
  <div></div>
  <div></div>
</div>

如何让 grid-item 占据整条线？

How can I make grid-item take the whole line?

html

css

flexbox

css-grid