17370845950

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 方案之一。