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

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

\n

是否有一个通用的“让这个类跨越 3 列”我可以使用？

\n

\n

是的

\n

grid-column: span 3;\n

\n

MDN

\n

\n

span

\n

为网格项\xe2\x80\x99s 放置提供网格跨度，使得网格项\xe2\x80\x99s 网格区域的相应边缘距相对边缘 n 行。

\n

\n

\r\n

\r\n

grid-column: span 3;\n

\r\n

.col3 {\n  grid-column: span 3;\n  height: 50px;\n  background: blue;\n}\n\n.col2 {\n  grid-column: 2 / span 2;\n  height: 50px;\n  background: red;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border: 2px solid green;\n}

\r\n

\r\n

\r\n

\n

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

\n