Grid 布局中如何实现子元素顶部对齐？

Grid 布局：轻松实现子元素顶部对齐

在使用 Grid 布局时，如何确保子元素在同一列中完美顶部对齐？本文将为您解答。

问题：子元素未对齐

许多开发者在创建多列 Grid 布局时，会遇到子元素无法顶部对齐的问题。即使元素已正确分列，但部分内容却错位，影响页面美观。

解决方案：grid-auto-flow: dense

解决此问题的关键在于 grid-auto-flow 属性。通过设置 grid-auto-flow: dense，可以强制 Grid 布局将元素尽可能地填充到现有空隙中，避免创建新的网格行，从而实现顶部对齐。

CSS 代码示例：

以下代码展示了如何使用 grid-auto-flow: dense 属性解决子元素顶部对齐问题：

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 10px; /* 列间距 */
  align-items: start; /* 确保元素从顶部开始对齐 */
  grid-auto-flow: dense; /* 关键属性：填充现有空隙 */
}

通过以上设置，您的 Grid 布局将完美地实现子元素顶部对齐，呈现整洁美观的页面效果。