CSSGrid等高布局技巧分享

**CSS Grid 实现等高行列布局方法：告别传统布局难题** 还在为实现等高行列布局而烦恼吗？本文将介绍如何利用强大的 CSS Grid 轻松实现这一目标，无需复杂的 JavaScript 代码或繁琐的浮动布局技巧。通过设置 `display: grid` 并定义 `grid-template-columns` 和 `grid-template-rows`，即可让同一行的子元素自动等高，同一列的元素自动等宽。我们还将探讨如何固定行高、利用 `grid-auto-rows` 实现自适应行高与自动换行，以及跨行列元素如何保持网格对齐。掌握 CSS Grid，让你的网页布局更加灵活高效！

使用CSS Grid可轻松实现等高行列布局：1. 设置display: grid并定义grid-template-columns和grid-template-rows，同一行子元素自动等高、同列等宽；2. 可通过grid-template-rows固定行高；3. 使用grid-auto-rows配合minmax实现自适应行高与自动换行；4. 跨行列元素仍保持网格对齐。

使用 CSS Grid 实现等高行列布局非常直接，不需要额外的 JavaScript 或浮动布局技巧。Grid 布局天然支持行和列的对齐与尺寸控制，能自动让同一行的项目等高、同一列的项目等宽。

1. 基本等高行列布局

只要将容器设置为 display: grid，并定义行和列，Grid 会自动让同一行中的子元素高度一致，同一列中的宽度一致。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  grid-template-rows: auto; /* 行高由内容决定，但同一行等高 */
  gap: 10px;
}
.item {
  background: #e0e0e0;
  padding: 20px;
}

HTML 结构示例：

<div class="container">
  <div class="item">内容较少</div>
  <div class="item">内容较多，高度更高，其他同列项也会随之拉高</div>
  <div class="item">中等内容</div>
  <div class="item">第二行</div>
  <div class="item">第二行</div>
  <div class="item">第二行</div>
</div>

在这个例子中，每行的三个元素高度相同（取决于该行中最高的那个），每列的宽度也相等。

2. 固定行高或列宽

如果希望行高统一固定，可以显式设置 grid-template-rows。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px; /* 每行固定 100px 高 */
  gap: 10px;
}

这样所有行都会是 100px 高，超出内容可配合 overflow 控制。

3. 自动换行与等高（多行网格）

当项目数量不确定时，可用 grid-auto-rows 配合 grid-template-columns 实现自动换行且保持等高。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(80px, auto); /* 最小 80px，内容多时自动撑开 */
  gap: 10px;
}

这种方式适合卡片布局，每行项目等高，新增项目自动换行。

4. 跨行列仍保持等高

即使某些项目使用 grid-column 或 grid-row 跨越多列或多行，其余项目仍会按网格轨道对齐。

.item-wide {
  grid-column: span 2;
  background: #c0c0c0;
}

跨列的元素会影响所在行的高度，其所在行的所有项目依然等高。

基本上就这些。Grid 的强大之处在于它自动处理了对齐和尺寸分配，无需手动计算或 JS 干预。

到这里，我们也就讲完了《CSSGrid等高布局技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSSGrid,display:grid,grid-template-rows,grid-auto-rows,等高行列布局的知识点！