知识库

Appearance

Return to top
On this page

CSS Grid 布局

Grid（网格）是一种用于二维布局的 CSS 布局系统。

概述

Grid 布局适用于复杂的大规模布局，可以同时处理行和列。

容器属性

display

定义网格容器：

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

grid-template-columns 和 grid-template-rows

定义网格的列和行大小：

css
.container {
  grid-template-columns: 100px 200px 100px; /* 固定列宽 */
  grid-template-rows: 50px 100px; /* 固定行高 */
  
  /* 使用 fr 单位分配剩余空间 */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 使用 repeat() 函数 */
  grid-template-columns: repeat(3, 1fr);
  
  /* 使用 minmax() 函数 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

grid-template-areas

定义网格区域：

css
.container {
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

grid-gap, column-gap, row-gap

定义网格间距：

css
.container {
  gap: 10px; /* 行和列间距 */
  column-gap: 15px; /* 列间距 */
  row-gap: 10px; /* 行间距 */
}

grid-auto-columns 和 grid-auto-rows

定义隐式网格轨道大小：

css
.container {
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
}

grid-auto-flow

控制自动放置算法：

css
.container {
  grid-auto-flow: row; /* 默认值，按行填充 */
  grid-auto-flow: column; /* 按列填充 */
  grid-auto-flow: row dense; /* 紧密填充 */
  grid-auto-flow: column dense;
}

项目属性

grid-column 和 grid-row

定义项目在网格中的位置：

css
.item {
  grid-column: 1 / 3; /* 从第1列到第3列（不包含） */
  grid-column: 1 / -1; /* 从第1列到最后一列 */
  grid-column: span 2; /* 跨越2列 */
  
  grid-row: 1 / 3; /* 从第1行到第3行 */
  grid-row: span 2; /* 跨越2行 */
}

grid-area

简写属性，可以定义网格区域名称或位置：

css
.item {
  grid-area: 1 / 1 / 3 / 2; /* row-start / column-start / row-end / column-end */
  grid-area: header; /* 网格区域名称 */
}

justify-self

水平轴上对齐单个项目：

css
.item {
  justify-self: start; /* 左对齐 */
  justify-self: end; /* 右对齐 */
  justify-self: center; /* 居中 */
  justify-self: stretch; /* 默认值，拉伸 */
}

align-self

垂直轴上对齐单个项目：

css
.item {
  align-self: start; /* 顶部对齐 */
  align-self: end; /* 底部对齐 */
  align-self: center; /* 垂直居中 */
  align-self: stretch; /* 默认值，拉伸 */
}

place-self

justify-self 和 align-self 的简写：

css
.item {
  place-self: center; /* 水平和垂直都居中 */
  place-self: center stretch; /* 水平居中，垂直拉伸 */
}

常用函数和单位

fr 单位

分配剩余空间：

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

minmax() 函数

定义大小范围：

css
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 自适应列，最小200px，最大1fr */
}

repeat() 函数

重复模式：

css
.container {
  grid-template-columns: repeat(5, 1fr); /* 5列，每列相等 */
  grid-template-columns: repeat(2, 100px 1fr); /* 重复 100px 1fr 模式2次 */
}

实用示例

响应式网格

css
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

经典网页布局

css
.page-layout {
  display: grid;
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-rows: auto 1fr auto auto;
  height: 100vh;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

卡片网格

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Grid 模板简写属性

grid-template

grid-template-columns、grid-template-rows 和 grid-template-areas 的简写：

css
.container {
  grid-template:
    [row1-start] "header header header" 1fr [row1-end]
    [row2-start] "sidebar main aside" 1fr [row2-end]
    [row3-start] "footer footer footer" 100px [row3-end]
    / 150px 1fr 150px;
}

grid

所有网格属性的简写：

css
.container {
  grid: 100px 300px / auto 1fr;
  /* 等价于 */
  grid-template-rows: 100px 300px;
  grid-template-columns: auto 1fr;
}

最佳实践

  • Grid 适合二维布局，Flexbox 适合一维布局
  • 使用 Grid 创建整体页面布局
  • 使用 minmax() 和 auto-fit/auto-fill 实现响应式网格
  • 合理使用网格线和区域名称提高可读性
  • 考虑老版本浏览器的兼容性（IE10+ 支持）