CSS Grid 布局：巧妙实现顶部内容对齐
在网页布局中，如何让网格中的内容顶部对齐是一个常见问题。本文将演示如何利用 CSS Grid 布局轻松解决这个问题。
假设您已有如下 HTML 代码：
hello1hello2hello3hello4hello5hello6hello7
您希望实现的效果是：
1 3 6 2 4 7 5
但默认情况下，可能会出现如下布局：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
1
2 3
4
5 6
7
这是因为 grid-auto-flow 属性默认值为 row 或 column，导致元素按行或列顺序填充网格。
为了实现顶部对齐，我们需要使用 grid-auto-flow: dense;。此属性会让 Grid 布局尽可能紧密地填充网格单元格，避免出现不必要的空行或空列。
因此，只需在 CSS 中添加以下代码即可：
.fruit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: start; /* 保持项目顶部对齐 */
grid-auto-flow: dense; /* 关键：紧密填充网格 */
}
通过添加 grid-auto-flow: dense;，Grid 布局将按照您预期的顺序，将元素紧密排列在顶部，从而实现顶部对齐的效果。
