使用 CSS Grid 布局时如何让内容顶部对齐？

如何解决使用 css grid 布局时内容不顶部对齐的问题？

问题描述：

在使用 css grid 布局创建一个三栏布局时，遇到中间和右侧内容不顶部对齐的情况，如下所示：

1
2 3
  4
  5 6
    7

登录后复制

而期望的显示形式应该是：

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

1 3 6
2 4 7
  5

登录后复制

原因分析：

原先的 css 代码中缺少了 grid-auto-flow: dense 属性。

解决方案：

在 fruit-grid 类上添加 grid-auto-flow: dense 属性，可以解决此问题。

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

登录后复制

grid-auto-flow: dense 属性可让元素尽可能地使用前面空的网格，而不是创建新的网格行或列。从而实现顶部对齐。

修正后的代码：

<p class="fruit-grid">
  <p class="fruit">hello1</p>
  <p class="fruit">hello2</p>
  <p class="fruit">hello3</p>
  <p class="fruit">hello4</p>
  <p class="fruit">hello5</p>
  <p class="fruit">hello6</p>
  <p class="fruit">hello7</p>
</p>

登录后复制

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

登录后复制

以上就是使用 CSS Grid 布局时如何让内容顶部对齐？的详细内容，更多请关注抖狐科技其它相关文章！