CSS Grid 布局指南

CSS Grid 布局指南

Grid 简介

CSS Grid Layout（简称 Grid）是 CSS3 引入的一种二维布局模型，与 Flexbox 的一维布局不同，Grid 可以同时控制行和列，让复杂网页布局变得简单直观。它允许开发者将容器划分为行和列，然后精确地将子元素放置到任意单元格中。

核心优势：

• 真正的二维布局能力（同时控制行和列）
• 无需浮动或定位即可实现复杂网格结构
• 支持显式与隐式网格轨道
• 可通过命名区域直观描述布局
• 轻松实现元素重叠（类似定位但更灵活）

核心概念

Grid 布局中有几个关键术语：

• Grid 容器 ：设置 display: grid 的元素，所有直接子元素自动成为网格项目。
• 网格线（grid lines） ：构成网格结构的分隔线，分为列线和行线，从 1 开始编号。
• 网格轨道（grid track） ：两条相邻网格线之间的空间，即一行或一列。
• 网格单元格（grid cell） ：单个行轨道和单个列轨道交叉形成的单位区域。
• 网格区域（grid area） ：由多个单元格组成的矩形区域。

可以这样类比：网格线就像是表格的边框，轨道就是行或列，单元格是每个格子，区域是合并后的格子。

Grid 容器属性

首先将父容器设为 Grid 容器：

.container {
  display: grid;      /* 块级网格 */
  display: inline-grid; /* 行内级网格 */
}

grid-template-columns / grid-template-rows

定义网格的列宽和行高。可以使用多种单位：px、%、fr、auto、minmax()、repeat()。

.container {
  grid-template-columns: 200px 1fr 2fr;   /* 三列：200px, 1份, 2份 */
  grid-template-rows: 100px auto 200px;   /* 三行 */
}

值类型	说明
长度值	100px、5rem 等固定尺寸
百分比	相对于容器内联尺寸（可能受 height 影响）
fr	剩余空间的分数，类似 Flexbox 的 flex-grow
auto	由内容决定，相当于 minmax(min-content, max-content)
minmax()	定义尺寸范围
repeat()	简化重复轨道

grid-template-areas

通过命名区域定义布局，每个区域对应一个网格项目。使用 . 表示空单元格。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}
​
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

区域名称会生成隐式的网格线，例如 header-start / header-end。

gap / row-gap / column-gap

设置网格轨道之间的间距（不作用于容器边缘）。

属性	作用
row-gap	行间距
column-gap	列间距
gap	简写，先行后列

.container {
  gap: 20px;        /* 行和列间距均为20px */
  row-gap: 10px;    /* 单独覆盖 */
  column-gap: 20px;
}

justify-items / align-items / place-items

控制所有项目在单元格内的对齐方式。

属性	方向	可选值
justify-items	行轴（水平）	start、end、center、stretch（默认）
align-items	列轴（垂直）	start、end、center、stretch（默认）
place-items	简写	<align-items> <justify-items>

.container {
  justify-items: center;
  align-items: center;
  place-items: center center; /* 垂直水平居中 */
}

justify-content / align-content / place-content

当网格总尺寸小于容器尺寸时，控制整个网格在容器内的对齐方式。

值	表现
start	网格紧靠起始边
end	网格紧靠结束边
center	网格居中
stretch	拉伸网格轨道填满容器（需轨道尺寸为 auto）
space-between	轨道两端对齐，间距相等
space-around	每个轨道两侧间距相等（边缘间距为中间一半）
space-evenly	所有间距完全相等（包括边缘）

.container {
  justify-content: space-evenly;
  align-content: center;
}

grid-auto-columns / grid-auto-rows

为隐式创建的网格轨道设置尺寸（当项目超出显式网格范围时自动生成）。

.container {
  grid-auto-rows: 100px;   /* 所有隐式行高100px */
  grid-auto-columns: 1fr;  /* 隐式列宽按比例分配 */
}

grid-auto-flow

控制自动布局的项目排列方向以及是否"紧密"填充。

值	表现
row（默认）	逐行填充，排满一行后换行
column	逐列填充，排满一列后换列
row dense	逐行填充，但允许提前插入较小项目填补空隙
column dense	逐列填充，允许填补空隙

.container {
  grid-auto-flow: row dense;
}

Grid 项目属性

以下属性作用于 Grid 容器的直接子元素。

grid-column / grid-row

指定项目占用的起始和结束网格线。简写：grid-column: start / end。

写法示例	说明
grid-column: 2 / 4	从第2列线开始，到第4列线结束
grid-row: 1 / 3	从第1行线到第3行线
grid-column: span 2	跨越2列（自动推算起始线）
grid-column: 2 / span 2	从第2列线开始，跨越2列
grid-column: -1	使用负数索引表示从末尾开始计数

.item {
  grid-column: 2 / 4;   /* 跨越2列 */
  grid-row: 1 / 3;      /* 跨越2行 */
}

grid-area

可作为四个值的简写（row-start / column-start / row-end / column-end），也可以引用由 grid-template-areas 定义的区域名称。

/* 方式一：位置简写 */
.item {
  grid-area: 1 / 2 / 3 / 4;  /* row-start / col-start / row-end / col-end */
}

/* 方式二：使用命名区域 */
.item {
  grid-area: header;
}

justify-self / align-self / place-self

覆盖容器的对齐方式，单独控制某个项目在单元格内的位置。

属性	作用	可选值
justify-self	水平方向对齐（行轴内）	start、end、center、stretch（默认）
align-self	垂直方向对齐（列轴内）	start、end、center、stretch（默认）
place-self	简写，先垂直后水平	center stretch 等

.item {
  justify-self: end;
  align-self: start;
  place-self: center stretch;
}

实用函数与关键字

fr 单位

fr（fraction）表示可用空间的一部分，类似于 Flexbox 中的 flex-grow。

grid-template-columns: 1fr 2fr 1fr;  /* 四等分中的比例：1/4, 2/4, 1/4 */

当与其他固定长度单位混用时，先分配固定长度，剩余空间再按 fr 比例分配。

minmax()

定义尺寸范围，接受最小值和最大值。常用于响应式设计，保证轨道不超出预期。

grid-template-columns: minmax(100px, 1fr) 2fr;
/* 第一列最小100px，最大占1份剩余空间 */

repeat()

简化重复轨道定义，避免重复书写相同值。

/* 定义4个等宽列 */
grid-template-columns: repeat(4, 1fr);

/* 定义3个行高，每个高度在100px到auto之间 */
grid-template-rows: repeat(3, minmax(100px, auto));

/* 配合 auto-fill / auto-fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fill 与 auto-fit

两者都与 repeat() 结合使用，用于创建响应式网格。

关键字	行为
auto-fill	尽可能多地放置轨道（不拉伸），即使某些轨道为空也会保留空间
auto-fit	放置轨道后，拉伸现有轨道以填满容器，空轨道会被折叠（尺寸设为0）

典型区别 ：在容器宽度大于最小轨道宽度时，auto-fit 会让现有轨道拉伸填满；auto-fill 可能留下空白轨道。

/* 响应式卡片网格：每列最小200px，自动填充 */
.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

浏览器兼容性

CSS Grid 在现代浏览器中支持良好：

• Chrome 57+
• Firefox 52+
• Safari 10.1+
• Edge 16+

对于 Internet Explorer 10/11：

• IE 支持一种旧的 Grid 语法（-ms- 前缀），但功能不完整且存在许多 bug。
• 不支持 grid-template-areas、gap、minmax() 等现代特性。
• 如需兼容 IE，建议使用 Flexbox 作为后备，或使用 PostCSS 等工具降级。
• 一般不推荐在生产环境中依赖 IE 的 Grid 实现。

推荐使用 Autoprefixer 自动添加浏览器前缀 ，并设置 grid: true 以确保现代 Grid 语法的前缀正确（尽管现代浏览器通常不需要前缀）。