前端Wiki/CSS/深入/Grid 网格布局

行列定义与间距

grid-template-columns 和 grid-template-rows 定义列宽行高，可用的值非常灵活：

固定值：200px。
百分比：30%。
fr 单位：fraction，剩余空间的份数。1fr 2fr 表示按 1:2瓜分，比百分比更智能（自动扣除固定列）。
auto：由内容撑开。
repeat()：repeat(3, 1fr) 等价于 1fr 1fr 1fr，重复几次写一次。
minmax(min, max)：限制轨道的伸缩范围，如 minmax(150px, 1fr)。

最著名的响应式配方：repeat(auto-fill, minmax(200px, 1fr))——容器能塞几列塞几列，每列最小 200px，多余空间平分，一行代码做出自适应卡片墙，不用写任何媒体查询。

行列间距用 gap：gap: 16px 或 gap: 10px 20px（行距列距）。

本节要点fr 按份分剩余空间、repeat 批量定义、minmax 限范围；repeat(auto-fill, minmax(200px,1fr)) 是自适应卡片墙万能公式；间距用 gap。

CSS

<style>
  .wall {
    display: grid;
    /* 列数自动适配，每列最小200px */
    grid-template-columns:
      repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;              /* 行列间距 */
  }
  .wall div {
    background: #b3e5fc;
    height: 70px;
  }
</style>
<div class="wall">
  <div>卡片1</div><div>卡片2</div>
  <div>卡片3</div><div>卡片4</div>
  <div>卡片5</div>
</div>

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读