网格列开始和结束而不指定开始或结束

Question

我有一个类，我们称它为 .col3，它是一个 div 内的网格项，类为 .container

容器有grid-template-columns: 25% 25% 25% 25%

我希望 .col3 类跨越 3 列。我知道通常我可以使用：

.col3{
   grid-column-start: 1;
   grid-column-end: 4;
}

但这并没有指定我希望它在第 2 列开始并结束的时间。是否有我可以使用的通用“使此类跨越 3 列”？

Answer 1

是否有我可以使用的通用“使此类跨 3 列”？

是的

grid-column: span 3;

MDN

span

为网格项的放置贡献一个网格跨度，使网格项的网格区域的对应边缘距离对边的 n 行。

.col3 {
  grid-column: span 3;
  height: 50px;
  background: blue;
}

.col2 {
  grid-column: 2 / span 2;
  height: 50px;
  background: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid green;
}

<div class="grid">
  <div class="col2"></div>
  <div class="col3"></div>
  <div>

或者，将结尾指定为-1 将跨越到最后一个网格列轨道。