只对第一行应用CSS网格布局

Question

我有以下简单的网格：

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

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

我遇到一个情况，无法编辑前端标记。我只想将网格应用于前三个项目。这可行吗？

- Sam

---

最后三个项目为什么不能在它们自己的网格行中？你想要实现什么布局？ - disinfor

我希望前3项均匀分配，但最后3项为全宽。 - Sam

使用 grid-template-areas 看起来非常简单。 - disinfor

好的，我会看一下，谢谢。 - Sam

Sam，虽然我的答案被接受了，但我认为你可能想标记Temani或Suyash的答案。尽管我的确有效，但其他两个答案的标记较少且更简洁。 - disinfor

谢谢@disinfor。非常好的回答。我需要阅读一些关于网格的内容;) - Sam

Answer 1

只需使每个元素从第四列开始跨越三列。您甚至不需要定义任何模板，隐式网格将为您完成。

.grid {
  display: grid;
}
.grid :nth-child(n + 4) {
  grid-column:span 3;
}

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

- Temani Afif

Answer 2

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid li:nth-child(n+4) {
  grid-column-start: 1;
  grid-column-end: 4;
}

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

- suyash1798

---

这样做不起作用，因为OP说他们无法更改标记，所以无法针对类进行定位。 - disinfor

我改变了标记语言/层叠样式表，现在请在你的回答中加上一个解释。 - Asons

这个版本比我的简单多了，非常简洁。请添加一个解释为什么这段代码能够工作。我认为它非常有价值。 - disinfor

Answer 3

以下是一个不使用模板区域，而是重复列和行的示例，并为每个元素设置起始和停止点（grid-column）。您会注意到，我使用了 nth-child 来针对前三个 li，然后使用 1n+4 来针对第四个及之后的所有内容。

对于 grid-template-rows，我将重复项设置为8，以防您的列表中有更多项目或者您的列表是动态的。

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 1fr;
}

.grid li:nth-child(1) {
  grid-column: 1/2;
}

.grid li:nth-child(2) {
  grid-column: 3/4;
}

.grid li:nth-child(3) {
  grid-column: 5/6;
}

.grid li:nth-child(1n+4) {
  grid-column: 1/6;
}

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

- disinfor

---

设置grid-template-row将使元素的高度大于其内容（添加边框以注意此问题）。您可以将其替换为grid-auto-rows:1fr，以便为任何新创建的行定义1fr。 - Temani Afif

很好的发现。我更新了答案以反映这一点。grid-template-rows: 1fr也可以工作。 - disinfor