在css中grid-template-columns repeat函数案例
最新回答
蜜糖
2026-07-12 09:07:42
在 CSS Grid 布局中，grid-template-columns 配合 repeat() 函数可高效定义重复的列结构，适用于等宽、弹性或响应式场景。以下是具体案例及说明：
1. 创建等宽多列布局场景：固定列宽，如四列等宽，每列 200px。代码：
.grid-container { display: grid; grid-template-columns: repeat(4, 200px); /* 4列，每列200px */}HTML 结构：
<div class="grid-container"> <div>内容1</div> <div>内容2</div> <div>内容3</div> <div>内容4</div></div>效果：容器内生成 4 列固定宽度网格，适用于图片墙、产品列表等。
2. 使用 fr 单位均分空间场景：弹性布局，三列均分容器剩余空间。代码：
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3列，每列占1/3 */}效果：每列宽度自动适应容器，响应式更强，适合表单、卡片布局。
3. 交替模式：混合固定与弹性单位场景：创建 6 列等宽弹性布局，或交替固定与弹性列。代码：
/* 6列等宽 */.grid-container { grid-template-columns: repeat(6, 1fr);}/* 交替模式：2列固定+2列弹性 */.grid-container { grid-template-columns: repeat(2, 150px 1fr); /* 等价于 150px 1fr 150px 1fr */}效果：
- 第一种生成 6 列均分空间。
- 第二种生成 4 列（固定 150px + 弹性 1fr 交替），适合复杂布局。
场景：根据容器宽度自动调整列数，每列最小 150px，最大 1fr。代码：
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}效果：
- 容器宽度不足时，列自动换行。
- 宽度充足时，填充空白区域，是现代响应式布局的常用方案。
场景：首列固定宽度，其余列弹性均分。代码：
.grid-container { display: grid; grid-template-columns: 80px repeat(3, 1fr); /* 首列80px，后3列均分 */}效果：生成 4 列（80px + 3 弹性列），适用于侧边栏+内容区的布局。
核心优势- 代码简洁：避免重复定义列宽，如 repeat(4, 200px) 替代 200px 200px 200px 200px。
- 响应式灵活：结合 fr、auto-fit、minmax 实现自适应。
- 适用场景广：卡片列表、表单、图片墙等需规律排列的布局。
- fr 单位分配的是剩余空间，需确保容器有明确宽度。
- auto-fit 与 auto-fill 区别：
auto-fit：尽可能填充行，隐藏空白列。
auto-fill：保留空白列，适合动态内容。
通过 repeat() 函数，可高效实现复杂网格布局，提升代码可维护性。
热门标签
