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

有志者，事竟成！如果你在学习文章，那么本文《使用 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 属性可让元素尽可能地使用前面空的网格，而不是创建新的网格行或列。从而实现顶部对齐。

修正后的代码：

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。