当前位置：首页 > 文章列表 > 文章 > 前端 > CSSGrid等宽列等高行实现方法

CSSGrid等宽列等高行实现方法

2026-01-26 14:59:50 0浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS Grid实现等宽列与等高行的技巧》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

使用CSS Grid可轻松实现等宽列和等高行。通过display: grid设置容器，用grid-template-columns结合fr单位或repeat()函数定义等宽列，如repeat(3, 1fr)创建三等宽列，或使用minmax()实现响应式自适应列；同一行内网格项默认等高，无需额外设置，内容不同时也会自动拉伸对齐高度。示例中3列布局每项均分宽度，各行根据内容自动调整并保持等高，gap属性添加间距，整体布局灵活且无需JavaScript干预。

如何用css grid实现等宽列与等高行

使用 CSS Grid 实现等宽列和等高行非常直接，只需要合理设置 grid-template-columns 和容器的 display: grid 属性即可。下面分步说明如何实现。

1. 设置等宽列

要让所有列宽度相等，可以使用 fr 单位或 repeat() 函数配合 auto-fit 或固定数量。

示例：创建 3 个等宽列

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
}

或者更简洁地写成：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

如果希望列数自适应容器宽度，可以用：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这样每列最小 200px，超出后自动换行并均分剩余空间。

2. 实现等高行

CSS Grid 默认会让同一行中的网格项（grid items）高度一致，也就是“等高行”。只要父容器是 display: grid，子元素会自动拉伸填满所在行的高度。

示例：两行内容不等但高度一致

.container {
  display: grid;
  grid-template-rows: auto auto; /* 行高由内容决定，但同行动态等高 */
  gap: 10px;
}
<p>.item {
background: #eee;
padding: 20px;
}</p>

即使某个格子内容较少，它仍会与同行中内容最多的格子保持相同高度。

3. 完整示例：3列等宽 + 自动等高行

结合上面两点，一个典型的布局代码如下：

<div class="grid-container">
  <div class="item">内容1</div>
  <div class="item">内容2很长很长...</div>
  <div class="item">内容3</div>
  <div class="item">内容4</div>
  <div class="item">内容5</div>
  <div class="item">内容6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分宽度 */
  gap: 16px;
}
<p>.item {
background-color: #f0f8ff;
padding: 20px;
border: 1px solid #ccc;
}</p>

在这个例子中，每行最多显示 3 个等宽项，且每行中的项目高度自动对齐。

基本上就这些。Grid 的强大之处在于它天然支持等宽列和等高行，无需额外计算或 JavaScript 干预。掌握 fr、repeat() 和 grid-template-columns/rows 就能快速构建灵活布局。

今天关于《CSSGrid等宽列等高行实现方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS Grid,等宽等高的内容请关注golang学习网公众号！

CSS Grid 等宽等高