时间戳

首页 > 解决方案 > 仅将 css 网格应用于第一行

css - 仅将 css 网格应用于第一行

问题描述

我有以下简单的网格：

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

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

标签： csscss-grid

解决方案

只需使每个元素从第四列开始跨越 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>

推荐阅读