在 CSS 网格布局中展开单元格答案

【问题标题】：Expanding cells in CSS grid layout在 CSS 网格布局中展开单元格
【发布时间】：2020-06-30 00:59:14
【问题描述】：

我有以下 HTML/CSS

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


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

现在，有时，取决于 div 和 main 类，有时我没有 div 和 right 类（换句话说，html 可能看起来像这样

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


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
</div>

如果div.right 不存在，我喜欢以将div.left 扩展到容器div.main 的整个宽度的方式编写CSS 代码。我该怎么做？

【问题讨论】：

标签： css css-grid

【解决方案1】：

您可以依赖隐式网格创建：

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "right" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">right</div>
</div>

<div class="main">
  <div class="left">Left</div>
</div>

如果你想删除left，它也可以：

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "left" element */
  grid-auto-flow:column;
  margin:5px;
}


.left {
  background-color: green;
  grid-column-end:1; /* added this */
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">right</div>
</div>

<div class="main">
  <div class="right">right</div>
</div>

【讨论】：

【解决方案2】：

这是更适合 flexbox 的东西，但如果你的结构像你所说的那样简单，only-child 可以在这里使用。

.main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 1em;
}


/* The following is not essential - for decoration purposes only */

.left {
  background-color: green;
  height: 25vh;
}

.left:only-child {
  grid-column: 1 / -1;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

<div class="main">
  <div class="left">Left</div>
</div>

【讨论】：