何雨果的知识库

Appearance

CSS Grid 网格布局 ​

CoreCSS Layout

CSS Grid 是专为 二维布局 设计的 CSS 工具，可以同时处理行（row）和列（column）的排列。它与 Flexbox 互补——Flexbox 擅长一维对齐，Grid 擅长二维网格。

一、🔄 Grid vs Flexbox ​

维度FlexboxGrid
布局维度一维（行 或 列）二维（行 和 列）
对齐特点内容优先，灵活分配网格优先，严格对齐
适用场景导航栏、按钮组、卡片行整页布局、仪表盘、复杂网格
组合使用Grid 内的单元格可包含 Flexbox常见：Grid 做整体布局，Flexbox 做单元格内对齐

不是二选一

实际开发中，Grid 和 Flexbox 经常配合使用。Grid 做页面整体结构，Flexbox 负责单元格内部的元素对齐。

二、🚀 Display Grid 基础 ​

2.1 启用 Grid ​

在 容器 上设置 display: grid：

css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;     /* 两列，比例 1:2 */
  grid-template-rows: 1fr 1fr;        /* 两行，等高 */
  gap: 10px;                           /* 网格间距 */
}
html
<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

2.2 网格术语 ​

术语说明
Grid Container设置了 display: grid 的父元素
Grid Items容器内的直接子元素
Track（轨道）一行或一列，由 grid-template-rows/columns 定义
Cell（单元格）行与列的交叉区域，网格的最小单位
Grid Line（网格线）分隔轨道的线，可通过 gap 控制间距
     线1    线2    线3    线4
      │      │      │      │
线1 ──┼──────┼──────┼──────┤
      │ Cell │ Cell │ Cell │  ← 行轨道 1
线2 ──┼──────┼──────┼──────┤
      │ Cell │ Cell │ Cell │  ← 行轨道 2
线3 ──┼──────┼──────┼──────┤
        ↑      ↑      ↑
      列轨道  列轨道  列轨道
        1      2      3

三、📐 Grid Sizing（尺寸控制） ​

3.1 固定尺寸 ​

css
.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 400px 800px;
}
  • 使用 px 或 rem
  • 不响应式：窗口大小变化不影响网格尺寸

3.2 Auto 尺寸 ​

css
.container {
  grid-template-rows: 100px auto;
  grid-template-columns: 200px auto;
}
使用位置行为
列（column）的 auto扩展至 100% 可用宽度（响应式）
行（row）的 auto仅占 内容所需高度（非响应式）

3.3 分数单位（fr） ​

css
.container {
  grid-template-rows: 1fr 2fr;      /* 第二行是第一行的 2 倍高 */
  grid-template-columns: 1fr 1fr;   /* 两列等宽 */
}

fr（fractional unit）定义 比例关系，随容器大小自动调整。

3.4 MinMax 函数 ​

css
.container {
  grid-template-columns: 200px minmax(400px, 800px);
}
参数说明
第一个值（min）列的 最小宽度
第二个值（max）列的 最大宽度

当容器宽度充足时列为 800px，缩小时列会收缩至最小 400px。

3.5 Repeat 函数 ​

css
/* 等价于 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(8, 1fr);

/* 等价于 200px 200px */
grid-template-rows: repeat(2, 200px);

格式：repeat(重复次数, 尺寸值)

3.6 Grid Template 简写 ​

css
/* grid-template: rows / columns */
grid-template: 1fr 2fr / 200px 400px;

/* 等价于 */
grid-template-rows: 1fr 2fr;
grid-template-columns: 200px 400px;

学习阶段建议

简写可读性较差，学习时建议使用 grid-template-rows 和 grid-template-columns 分开书写。

3.7 自动行（Grid Auto Rows） ​

当项目数量 超过 模板定义的网格时，多余项目会自动创建新行：

css
.container {
  grid-template-rows: 200px 200px;      /* 2 行 */
  grid-template-columns: 100px 100px;   /* 2 列 */
  grid-auto-rows: 300px;                /* 超出模板的新行高 300px */
}

四、📍 Grid Placement（项目放置） ​

4.1 默认放置 ​

项目按照 HTML 顺序，从左到右、从上到下依次填入网格单元格。

4.2 Grid Column（跨列） ​

css
/* 方式一：span 语法 */
.item { grid-column: span 2; }    /* 跨 2 列 */

/* 方式二：起止线号 */
.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* 方式三：简写 */
.item { grid-column: 1 / 3; }     /* 从线 1 到线 3 */

/* 方式四：负值（从右侧计数） */
.item { grid-column: 1 / -1; }    /* 从第一条线到最后一条线（满宽） */

负值的便利

-1 始终代表 最右边 的网格线，在列数不确定时非常有用。

4.3 Grid Row（跨行） ​

css
.item { grid-row: span 2; }       /* 跨 2 行 */
.item { grid-row: 1 / 3; }        /* 从线 1 到线 3 */

4.4 Grid Area（区域定位） ​

一次性指定四个坐标：

css
/* grid-area: row-start / column-start / row-end / column-end */
.item { grid-area: 2 / 1 / 3 / 3; }
顺序值含义
1row-start行起始线号
2column-start列起始线号
3row-end行结束线号
4column-end列结束线号

4.5 Order（项目排序） ​

与 Flexbox 类似，order 属性改变项目的视觉排列顺序：

css
.item { order: 1; }   /* 默认为 0，数值越大越靠后/靠下 */

4.6 项目叠加 ​

Grid 的一大独特能力——允许项目 重叠：

css
.item-1 { grid-area: 1 / 1 / 3 / 3; }
.item-2 { grid-area: 1 / 2 / 3 / 4; }  /* 与 item-1 重叠 */

使用 hex 透明度（如 #FF634780，末尾两位为 alpha 值）可实现半透明叠加效果。

五、🔍 Chrome DevTools 调试 Grid ​

5.1 Grid 调试器 ​

在 Elements 面板中，设置了 display: grid 的元素旁会出现 Grid 标签。点击可显示：

功能说明
网格线覆盖在页面上显示所有网格线
行/列尺寸显示每个轨道的实际像素尺寸
线号显示每条网格线的编号
延伸线将网格线延伸至可视区域边缘

5.2 Layout 面板 ​

在 DevTools 的 Layout 面板中可以：

  • 切换网格线颜色
  • 显示/隐藏线号
  • 显示/隐藏尺寸标注
  • 切换延伸线

六、🧪 实战示例 ​

6.1 棋盘（Chess Board） ​

css
.container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 800px;     /* 固定总宽，防止响应式拉伸 */
}

.white { width: 100px; height: 100px; background-color: #f0d9b5; }
.black { width: 100px; height: 100px; background-color: #b58863; }

6.2 蒙德里安画作（Mondrian） ​

利用 Grid 的核心特性重现 Piet Mondrian 的几何抽象画：

css
.container {
  display: grid;
  grid-template-columns: 320px 198px 153px 50px;
  grid-template-rows: 414px 130px 155px 22px;
  gap: 9px;
  background-color: #000;  /* 间距 = 黑线 */
}

.white { background-color: #F0F1EC; }
.red   { background-color: #E72F24; }
.blue  { background-color: #004592; }

/* 各单元格用 grid-column/grid-row span 定位 */

间距 = 网格线的颜色

Grid 无法直接设置网格线颜色，但可以将 容器背景色 设为线条颜色，再通过 gap 露出背景，模拟有颜色的网格线。

七、💡 实践要点 ​

#要点说明
1二维布局用 Grid有行 + 列需求时，Grid 比 Flexbox 更适合
2Grid + Flexbox 组合使用Grid 做页面骨架，Flexbox 做单元格内对齐
3fr 单位实现比例布局比百分比更灵活，自动分配剩余空间
4minmax() 限制响应范围保证列宽在合理范围内响应
5grid-column: 1 / -1快速跨满整行
6DevTools Grid 调试器可视化网格线和尺寸，快速定位布局问题

八、🎮 练习资源 ​

资源地址说明
Grid Gardencssgridgarden.com交互式闯关游戏，28 关
CSS Tricks Guidecss-tricks.com/snippets/css/complete-guide-grid最权威的 Grid 可视化参考

九、📚 参考资源 ​

← 返回 Web 开发研究