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

使用 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() 函数避免重复书写。

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

Starry.ai

AI艺术绘画生成器

35

查看详情

例如：创建四等宽列

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

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

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

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

例如：每列至少 150px，最多等分剩余空间

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

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

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