在css中grid-template-columns repeat函数案例-css教程-PHP中文网

在css中grid-template-columns repeat函数案例

P粉602998670

发布： 2025-10-18 17:25:01

原创

588人浏览过

grid-template-columns配合repeat()函数可简洁定义网格列，如repeat(4, 200px)创建四列等宽布局，repeat(3, 1fr)实现三等分弹性布局，支持混合单位与auto-fit加minmax实现响应式自适应，常用于卡片、表单等场景。

在css中grid-template-columns repeat函数案例

在 CSS Grid 布局中，grid-template-columns 用于定义网格容器中列的数量和大小。配合 repeat() 函数可以更简洁地设置重复的列宽，特别适用于创建等宽或有规律的列结构。

repeat(重复次数, 列宽)

例如：

grid-template-columns: repeat(3, 100px);

表示创建 3 列，每列宽度为 100px。

实现一个四列等宽、每列 200px 的网格：

.grid-container {
display: grid;
grid-template-columns: repeat(4, 200px);
}

HTML 结构：

让三列平均分配父容器的可用空间：

grid-template-columns: repeat(3, 1fr);

每列占据三分之一宽度，响应式更强。

创建 6 列，每列 1fr，适合响应式网格：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

grid-template-columns: repeat(6, 1fr);

或者混合使用固定与弹性单位：

grid-template-columns: repeat(2, 150px 1fr);

等价于：150px 1fr 150px 1fr（共 4 列）

根据容器大小自动调整列数，每列最小 150px，最大 1fr：

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

这是现代响应式布局的常用写法，能自动换行并填充空白区域。

比如第一列固定为 80px，其余 3 列均分剩余空间：

grid-template-columns: 80px repeat(3, 1fr);

总共 4 列，第一列为固定宽度，后三列为弹性。

基本上就这些常见用法。通过 repeat() 能大幅简化代码，提高可读性和维护性，尤其适合构建卡片列表、表单布局、图片墙等场景。

以上就是在css中grid-template-columns repeat函数案例的详细内容，更多请关注php中文网其它相关文章！