仅将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>

我遇到无法编辑前端标记的情况。我只希望将网格应用于前三个项目。这可能吗？

Answer 1

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

.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>