如何用css Grid实现等宽列布局_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-11-20

浏览次数：次

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

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

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

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

例如：创建三列等宽布局

代码示例：

  列1
  列2
  列3

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

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

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

例如：创建四等宽列

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

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

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

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

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

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

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

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

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