如何使用 Grid 布局实现顶部对齐？

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《如何使用 Grid 布局实现顶部对齐？》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

如何实现 grid 布局顶部对齐？

你在使用 grid 创建页面布局时遇到一个问题，即中间和右侧的内容没有顶部对齐，如下所示：

1
2 3
  4
  5 6
    7

你想要的结果是：

1 3 6
2 4 7
  5

代码如下：

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

.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-auto-flow: dense 到 .fruit-grid。此属性使元素尽可能使用前面空的网格，而不是产生新的网格。

修改后的代码如下：

.fruit-grid {
  ...
  grid-auto-flow: dense;
}

加了这条语句后，你的布局将以你想要的形式正确对齐：

1 3 6
2 4 7
  5

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 Grid 布局实现顶部对齐？》文章吧，也可关注golang学习网公众号了解相关技术文章。