如何用css grid实现等宽列与等高行-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-04 17:11:02

原创

603人浏览过

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

登录后复制

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

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

登录后复制

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

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

以上就是如何用css grid实现等宽列与等高行的详细内容，更多请关注php中文网其它相关文章！