前置知识: HTML5

CSS Grid 布局语法速查手册

2 min入门

CSS Grid 布局速查 的完整教学讲解。

容器属性

基本写法：grid 容器 display: grid;

/* 设置网格容器 */
.container {
  display: grid;
}

基本写法：inline-grid 行内网格 display: inline-grid;

/* 行内网格容器 */
.row {
  display: inline-grid;
}

基本写法：定义列轨道 grid-template-columns: <值> [值 ...];

/* 定义三列等宽 */
.container {
  grid-template-columns: 1fr 1fr 1fr;
}

基本写法：repeat 重复 grid-template-columns: repeat(<数量>, <值>);

/* 重复 3 列等宽 */
.container {
  grid-template-columns: repeat(3, 1fr);
}

基本写法：auto-fill 自动填充 grid-template-columns: repeat(auto-fill, minmax(<最小>, 1fr));

/* 响应式自动填充列 */
.container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

基本写法：auto-fit 自动适应 grid-template-columns: repeat(auto-fit, minmax(<最小>, 1fr));

/* 自动适应并拉伸填满 */
.container {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

基本写法：定义行轨道 grid-template-rows: <值> [值 ...];

/* 定义行高度 */
.container {
  grid-template-rows: 100px auto 100px;
}

基本写法：fr 单位 grid-template-columns: 1fr 2fr 1fr;

/* 按比例分配空间 */
.container {
  grid-template-columns: 1fr 2fr 1fr;
}

基本写法：minmax 最小最大 grid-template-columns: minmax(<最小>, <最大>);

/* 列宽最小 200px 最大 1fr */
.container {
  grid-template-columns: minmax(200px, 1fr);
}

基本写法：gap 间距 gap: <值>;

/* 网格间距 */
.container {
  gap: 20px;
}

基本写法：gap 行列分开 row-gap: <值>; column-gap: <值>;

/* 分别设置行列间距 */
.container {
  row-gap: 20px;
  column-gap: 10px;
}

网格线与区域

基本写法：命名网格线 grid-template-columns: [线名] <值> [线名];

/* 命名网格线 */
.container {
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

基本写法：grid-template-areas 区域 grid-template-areas: "<区域定义>";

/* 命名网格区域 */
.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

基本写法：项目放置到区域 grid-area: <区域名>;

/* 将项目放入指定区域 */
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}

基本写法：基于线放置 grid-column: <起线> / <止线>;

/* 跨越指定网格线 */
.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

基本写法：span 跨越 grid-column: span <数量>;

/* 跨越指定列数 */
.item {
  grid-column: span 2;
}

基本写法：grid-area 简写 grid-area: <行起> / <列起> / <行止> / <列止>;

/* 同时指定行列起止 */
.item {
  grid-area: 1 / 1 / 3 / 3;
}

对齐属性

基本写法：justify-items 水平对齐 justify-items: start | end | center | stretch;

/* 网格项水平对齐 */
.container {
  justify-items: center;
}

基本写法：align-items 垂直对齐 align-items: start | end | center | stretch;

/* 网格项垂直对齐 */
.container {
  align-items: center;
}

基本写法：justify-content 整体水平 justify-content: start | end | center | space-between | space-around | space-evenly;

/* 整个网格水平对齐 */
.container {
  justify-content: space-between;
}

基本写法：align-content 整体垂直 align-content: start | end | center | space-between | space-around;

/* 整个网格垂直对齐 */
.container {
  align-content: center;
}

基本写法：place-items 简写 place-items: <align-items> <justify-items>;

/* 同时设置垂直水平对齐 */
.container {
  place-items: center;
}

自动布局

基本写法：自动流方向 grid-auto-flow: row | column | dense;

/* 稠密填充避免空隙 */
.container {
  grid-auto-flow: dense;
}

基本写法：行方向稠密 grid-auto-flow: row dense;

/* 行方向稠密排列 */
.container {
  grid-auto-flow: row dense;
}

基本写法：自动轨道尺寸 grid-auto-rows: <值>; grid-auto-columns: <值>;

/* 自动生成行高 */
.container {
  grid-auto-rows: minmax(100px, auto);
}

常见布局模式

基本写法：圣杯布局 display: grid; grid-template-areas: "...";

/* 经典三栏圣杯布局 */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

基本写法：响应式卡片网格 grid-template-columns: repeat(auto-fill, minmax(<最小>, 1fr));

/* 自适应卡片网格 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

基本写法：12 列网格系统 grid-template-columns: repeat(12, 1fr);

/* 12 列栅格系统 */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.col-6 {
  grid-column: span 6;
}
.col-4 {
  grid-column: span 4;
}

现代 Grid 特性

基本写法：subgrid 子网格 grid-template-columns: subgrid;

/* 子网格继承父网格轨道 */
.nested {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

基本写法：容器查询单位 grid-template-columns: repeat(auto-fill, minmax(20cqi, 1fr));

/* 基于容器尺寸的列宽 */
.card {
  container-type: inline-size;
}
.card-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20cqi, 1fr));
}

基本写法：aspect-ratio 控制比例 aspect-ratio: <宽> / <高>;

/* 网格项保持 16:9 比例 */
.video-item {
  aspect-ratio: 16 / 9;
}

基本写法：masonry 瀑布流（实验性） grid-template-rows: masonry;

/* CSS Grid 瀑布流布局（实验特性） */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
}

动手试试

  1. 用 display: grid + repeat(auto-fit, minmax(200px, 1fr)) 做响应式卡片墙；
  2. 用 grid-template-areas 布局“头部/主体/侧栏/页脚”；
  3. 用 grid-column: 1 / -1 让元素跨行；
  4. 进阶挑战：对比 Grid 与 Flexbox 在同一个布局上的实现。

核心知识点

一句话记住 Grid：二维布局系统，轨道、区域、网格线三件套；1fr 分空间，minmax 控范围，auto-fit 自适应。

  • 轨道：grid-template-columns/rows；
  • 1fr：剩余空间等分；
  • minmax(min, max)：范围控制；
  • 区域：grid-template-areas + grid-area；
  • 网格线：grid-column: 1 / -1；
  • 隐式网格：grid-auto-rows 控制自动轨道。

注意事项与改进建议

问题点说明改进方案
内容撑破 1fr溢出minmax(0, 1fr)
区域名不一致布局失效命名对齐
隐式轨道高度元素挤压grid-auto-rows
与 flex 混用不清布局混乱明确一维/二维

扩展学习

  • 完整教程：css/250-CSS3GridGridLayout；
  • 对比：css/240-CSS3FlexboxFlexLayout；
  • 实战：css/680-CSSProjectExampleResponsiveHomepage。