如何使用 CSS Grid 实现每列顶部对齐的布局？

CSS Grid 实现列顶部对齐的技巧

在使用 CSS Grid 布局时，如何让多列内容从顶部开始对齐，而不是默认的从左到右填充？本文将详细讲解一种解决方案。

假设我们有以下 HTML 结构，包含多个 <div> 元素： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;div class=&quot;fruit-grid&quot;&gt; &lt;div class=&quot;fruit&quot;&gt;hello1&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello2&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello3&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello4&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello5&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello6&lt;/div&gt; &lt;div class=&quot;fruit&quot;&gt;hello7&lt;/div&gt; &lt;/div&gt;</pre>

立即学习“前端免费学习笔记（深入）”；

聚好用AI

可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台

115

查看详情

以下 CSS 代码展示了如何实现顶部对齐：

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
  grid-auto-flow: dense; 
}

.fruit {
  width: 100%;
  margin-bottom: 10px;
}

.fruit:nth-child(1),
.fruit:nth-child(2) {
  grid-column: 1;
}

.fruit:nth-child(3),
.fruit:nth-child(4),
.fruit:nth-child(5) {
  grid-column: 2;
}

.fruit:nth-child(6),
.fruit:nth-child(7) {
  grid-column: 3;
}

grid-template-columns: repeat(3, 1fr) 定义了三列，每列宽度相等。align-items: start 确保项目从容器的顶部开始对齐。 关键在于 grid-auto-flow: dense;，它指示 Grid 布局引擎尽可能紧凑地填充网格单元格，从而实现顶部对齐的效果。 如果没有 grid-auto-flow: dense;，Grid 会按照默认的从左到右填充顺序排列元素。 最后，nth-child 选择器用于指定每个元素所在的列。

通过以上方法，我们可以轻松地使用 CSS Grid 创建列顶部对齐的布局。