用三行 CSS 实现任意多列等分布局：深入掌握 Grid 的 repeat() 与 gap

做前端的你是不是经常遇到这样的需求：

要把一行内容平均分成 3、4、5 份；
每一份之间要有间隔；
并且要在各种屏幕下都能自适应；

很多人第一反应是：

"我用 flex + margin 就能搞定！"

没错，Flex 可以做到，但代码会越来越多：要算间距、要控制最后一列不留空隙、还得保证宽度自适应。

而用 CSS Grid，只需要三行：

css 复制代码

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;

四等分、有间距、完美自适应，一步到位。

我们就来系统讲讲这三行代码背后的"魔力"。

一、Grid 的核心：二维网格系统

display: grid 是 CSS 的二维布局神器。

与 flex 不同的是：

Flex 是 一维布局（只能沿主轴排列）
Grid 是 二维布局（可以同时控制行和列）

也就是说，用 Grid 你可以非常自然地创建 行 × 列 的布局，就像 Excel 一样！

二、三行代码拆解

css 复制代码

display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;

display: grid

声明容器为网格布局（Grid Container）。

容器里的每个子元素（Grid Item）会自动分布在网格单元中。

2️⃣ grid-template-columns

定义每一列的宽度。

比如 repeat(2, 1fr) 表示两列、平分宽度。

你也可以自由控制列数：

css 复制代码

grid-template-columns: repeat(3, 1fr); /* 三等分 */
grid-template-columns: repeat(4, 1fr); /* 四等分 */
grid-template-columns: repeat(5, 1fr); /* 五等分 */

gap

设置列与列之间的间距（行间距同样适用）。

这比用 margin 轻松太多了。

css 复制代码

gap: 10px;      /* 统一间距 */
column-gap: 20px; /* 只控制列间距 */
row-gap: 15px;  /* 只控制行间距 */

三、完整实战：多等分布局

html 复制代码

<div class="grid-demo">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</div>

css 复制代码

.grid-demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.box {
  background: #007bff;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 6px;
  font-weight: bold;
}

结果：

自动生成 4 列等分
每列之间间隔 10px
宽度随容器变化自适应

不需要 calc()、不需要手动算宽度、不怕最后一列溢出。

四、更多实用技巧

. 自动换行

当内容太多时，可以让 Grid 自动换行：

css 复制代码

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

意思是：

每个格子最小 200px，如果还有空间就平分剩余宽度。

这样就能实现"流式自适应布局"，非常适合图片墙、卡片列表等。

✅ 2. 指定不等列宽

如果你想要第一列固定宽度，其它自适应：

css 复制代码

grid-template-columns: 200px 1fr 1fr;

第一列 200px，后两列平分剩余宽度。

✅ 3. 内容居中对齐

css 复制代码

justify-items: center;  /* 水平居中 */
align-items: center;    /* 垂直居中 */

或：

css 复制代码

place-items: center;

一行代码搞定双向居中。

📱 五、响应式优化

很多人担心：

"多列布局在手机上是不是太挤了？"

没关系，加一点媒体查询就能自动变成单列：

css 复制代码

@media (max-width: 768px) {
  .grid-demo {
    grid-template-columns: 1fr;
  }
}

六、Grid 与 Flex 的对比总结

场景	用 Flex	用 Grid
一维排列（水平或垂直）	✅	🚫
二维布局（同时控制行列）	🚫	✅
等分列布局	⚠️ 需计算宽度	✅ repeat() 一行搞定
间距控制	margin 复杂	gap 简单
响应式适配	需要额外逻辑	auto-fill 优雅实现

一句话总结：

Flex 适合布局单行/单列，Grid 适合完整的页面结构。