html - 根据数量子元素展开 CSS 网格项

Question

我知道可以使用以下方法设置网格项跨越的列数：

grid-column: span 2;

但是只有在有可用空间的情况下，是否可以让 CSS 网格自动执行此操作？

所以在下面的模型中，如果有三个项目，它们每个占据一整列，但如果有两个，最后一个项目将扩大以填满空列。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
}

.grid-item {
  padding: 50px;
  color: white;
  background-color: lightpink;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<br />
<hr />
<br />

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item">I should take up two columns</div>
</div>

标签： htmlcsscss-grid

Answer 1

span 2您可以使用grid-column: 2 / -1;. 它说你的网格列应该从第二列开始并且应该跨越直到它有空间（正是你想要的）

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
}

.grid-item {
  padding: 50px;
  color: white;
  background-color: lightpink;
}

.grid-item-2 {
  grid-column: 2 / -1;
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<br />
<hr />
<br />

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item-2">I should take up two columns</div>
</div>