使用 grid-template-columns 配合 repeat() 和 fr 单位可实现等宽列布局，如 repeat(3, 1fr) 创建三等分列；通过 minmax() 与 auto-fit 可实现响应式自适应，如 repeat(auto-fit, minmax(200px, 1fr)) 保证最小宽度并自动调整列数；结合 gap 属性可安全添加间距而不破坏等分结构，适用于卡片、表单等场景。
要使用 CSS Grid 实现等宽列排列，核心是利用 grid-template-columns 属性配合重复函数和等分单位。这种方式简洁、灵活，适用于各种栅格布局场景。
基本语法：使用 repeat() 和 fr 单位
最常用的方法是结合 repeat() 函数与 fr（fraction）单位来定义等宽列。
例如，创建 3 列等宽布局：.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
这表示容器被分为 3 列，每列占据相等的可用空间。
固定列数的等宽列
如果你明确知道需要多少列，可以直接指定数量。
立即学习“前端免费学习笔记（深入）”；
-
4 等分列：
grid-template-columns: repeat(4, 1fr); -
2 等分列：
grid-template-columns: 1fr 1fr;或repeat(2, 1fr)
所有列将自动平均分配容器宽度，无论内容多少。
响应式等宽列（自适应）
结合 minmax() 可实现更智能的响应式等宽列，避免换行或溢出。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
含义：
- auto-fit： 自动填充列数
- minmax(200px, 1fr)： 每列最小 200px，最大占 1 份空间
屏幕变窄时列数自动减少，始终保持等宽且不换行。
添加间距（gap）
使用 gap 属性设置列之间的间距，不会破坏等宽结构。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
列宽会自动扣除间距部分，仍保持视觉上的等分效果。
基本上就这些。用 repeat(n, 1fr) 最简单直接，搭配 minmax() 和 auto-fit 能实现响应式等宽布局，适合卡片、表单、图片墙等场景。
