css grid是二维布局系统，通过容器与项目构建网格结构，支持行列精准控制。1. 容器设display: grid定义结构；2. 用grid-template-columns/rows定义轨道；3. 通过grid-column/row或grid-area定位项目；4. 支持gap、repeat()、minmax()等实现响应式与自动布局，优于传统浮动与定位，适合复杂页面布局。
CSS Grid（网格布局）是一个二维布局系统，能同时控制行和列，让网页元素按网格结构精准排列。它比 Flexbox 更适合整体页面或复杂模块的布局设计。
Grid 的核心概念
Grid 布局围绕“容器”和“项目”展开：
-
网格容器（grid container）：设置
display: grid或display: inline-grid的元素，它定义了整个网格的结构 - 网格项（grid item）：网格容器的直接子元素，自动成为网格项
- 网格线（grid line）：划分行和列的虚拟线，可以是数字编号（如第1行线、第2列线），也可以自定义名称
- 网格轨道（grid track）：相邻两条网格线之间的区域，即一行或一列
- 网格单元格（grid cell）：单个“格子”，由一行一列交叉形成
- 网格区域（grid area）：由四条网格线围成的矩形区域，可跨多行或多列
快速创建一个基础网格
只需两步就能搭起基本结构：
- 给父容器加
display: grid - 用
grid-template-columns和grid-template-rows定义列宽与行高
例如：
container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 200px;
}
这会生成一个 3 列 × 3 行的网格，中间列占两份空间，第二行高度自适应。
定位网格项的常用方式
把子元素放进指定位置，有几种直观写法：
- 用
grid-column-start / end和grid-row-start / end指定起止线（如grid-column: 2 / 4表示从第2列线到第4列线） - 简写为
grid-column: 2 / 4、grid-row: 1 / 3 - 用
grid-area一次性设置四条线：grid-area: 1 / 2 / 3 / 4 - 提前用
grid-template-areas定义命名区域，再用grid-area: "header"直接分配
Grid 的实用优势
它解决了传统布局中几个长期痛点：
- 无需浮动（float）或绝对定位（position）就能实现等高列、圣杯布局、响应式卡片墙
- 支持
gap属性统一控制行列间距，告别 margin 折叠烦恼 - 配合
minmax()、repeat()、auto-fit等函数，轻松实现灵活响应式网格 - 支持隐式网格（implicit grid），内容超出定义范围时自动创建新行/列
基本上就这些。Grid 不是万能，但对结构化布局来说，它是最直接、可控性最强的 CSS 方案之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
