CSS Grid 布局完全指南

CSS Grid 是目前最强大的 CSS 布局方案，本文将从零开始带你掌握它的核心概念。

为什么选择 Grid

在 Grid 出现之前，我们依赖 float、position 甚至 table 来实现复杂布局。这些方案各有局限，而 Grid 从设计之初就是为二维布局而生。

基础概念

Grid 容器通过 display: grid 声明，子元素自动成为 Grid 项目。通过 grid-template-columns 和 grid-template-rows 定义轨道。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

fr 单位

fr（fraction）是 Grid 专用的弹性单位，代表可用空间的分数。1fr 2fr 表示第二列宽度是第一列的两倍，且自适应容器宽度。

命名网格线

Grid 线可以命名，方便后续定位子元素，尤其在构建复杂页面布局时极为有用。

总结

掌握 Grid 的关键在于理解「轨道」「单元格」「区域」三个核心概念。配合 minmax()、auto-fill、auto-fit，几乎可以实现任何布局需求。