如何用css Grid实现等宽列布局

使用 grid-template-columns 配合 fr、repeat 和 minmax 可轻松实现等宽列布局，如 1fr 均分容器、repeat(4, 1fr) 创建四等宽列，或 repeat(auto-fit, minmax(150px, 1fr)) 实现响应式自适应列数与最小宽度控制。

使用 CSS Grid 实现等宽列布局非常简单，核心是通过 grid-template-columns 属性定义列的宽度。下面介绍几种常用方法。

使用 fr 单位均分容器宽度

fr（fraction）单位表示可用空间的一份。如果希望所有列等宽，可以为每列设置相同的 fr 值。

代码示例：
<div class="grid-container">
  <div>列1</div>
  <div>列2</div>
  <div>列3</div>
</div>

CSS：
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

这会让三列各占容器宽度的三分之一，自动适应容器大小。

使用 repeat() 简化重复列定义

当列数较多时，可以用 repeat() 函数避免重复书写。

立即学习“前端免费学习笔记（深入）”；

析稿Ai写作

科研人的高效工具：AI论文自动生成，十分钟万字，无限大纲规划写作思路。

142

查看详情

CSS：
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

repeat(4, 1fr) 表示创建 4 列，每列宽度为 1fr，效果与手动写 1fr 1fr 1fr 1fr 相同。

限制最大宽度或添加最小宽度控制

有时你希望列等宽但不希望在大屏幕上过度拉伸，可以结合 minmax() 使用。

CSS：
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

这种方式在响应式布局中很实用，既能保持等宽，又能根据屏幕尺寸自动调整列数。

基本上就这些。用 grid-template-columns 配合 fr、repeat 和 minmax，就能灵活实现各种等宽列需求。

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