css3 grid

leijmdas

834人浏览 · 2025-09-11 22:42:19

leijmdas · 2025-09-11 22:42:19 发布

CSS3 Grid Layout 是一个强大的二维布局系统，专为处理行和列的复杂网页布局而设计。与 Flexbox（主要处理一维布局）不同，Grid 允许你同时在两个维度上精确控制元素的位置和大小。

以下是 CSS3 Grid 布局的核心概念和常用属性的概述：

🧱 一、基本概念

网格容器 (Grid Container)：通过设置 display: grid 或 display: inline-grid 的元素成为网格容器，其直接子元素自动成为网格项目 (Grid Items)。
网格线 (Grid Lines)：划分网格的水平和垂直线，用于定位网格项目。网格线从1开始编号。
网格轨道 (Grid Track)：两条相邻网格线之间的空间，即行或列。
网格单元格 (Grid Cell)：行和列交叉形成的最小单位。
网格区域 (Grid Area)：由一个或多个网格单元格组成的矩形区域，可以通过 grid-template-areas 命名。

⚙️ 二、容器属性 (Container Properties)

网格容器的属性用于定义网格的整体结构和行为。

定义网格行列：
- grid-template-columns：定义每一列的宽度。支持单位：px, %, fr, auto, minmax(), repeat()。
  - 示例：grid-template-columns: 100px 1fr 2fr; （第一列100px，第二列是第三列的一半）
  - 示例：grid-template-columns: repeat(3, 1fr); （创建3列，每列等宽）
- grid-template-rows：定义每一行的高度。支持单位同上。

定义网格区域：

grid-template-areas：通过命名区域来定义布局模板。

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

网格间距：
- gap：row-gap 和 column-gap 的简写形式，用于设置行和列之间的间距。
  - 示例：gap: 10px 20px; （行间距10px，列间距20px）
对齐方式：
- justify-items / align-items：控制所有网格项目在单元格内的水平/垂直对齐方式（start | end | center | stretch）。
- justify-content / align-content：控制整个网格在容器内的水平/垂直对齐方式（当网格总尺寸小于容器时）。
自动布局：
- grid-auto-flow：控制自动放置的网格项目的流向，默认为 row（先行后列），还可设置为 column（先列后行）或 dense（尝试填充空白）。
- grid-auto-rows / grid-auto-columns：指定隐式创建的网格轨道（即超出预先定义行列的那些项目）的大小。

📐 三、项目属性 (Item Properties)

网格项目的属性用于控制单个项目在网格内的位置和外观。

项目位置：
- grid-column-start / grid-column-end / grid-row-start / grid-row-end：指定项目占据的起始和结束网格线。
- 简写：
  - grid-column: <start> / <end>; （示例：grid-column: 1 / 3; 从第1条线到第3条线，即跨越2列）
  - grid-row: <start> / <end>;
  - grid-area: <row-start> / <column-start> / <row-end> / <column-end>; （示例：grid-area: 1 / 1 / 3 / 3;）
  - 也可以使用 grid-area 直接指定在 grid-template-areas 中定义的区域名称。
项目自对齐：
- justify-self / align-self：控制单个网格项目在单元格内的水平/垂直对齐方式，覆盖容器的 justify-items / align-items 设置。
项目顺序：
- order：控制网格项目的显示顺序，数值越小越靠前。

🌐 四、实用技巧与示例

响应式布局：

使用 repeat(), auto-fit, auto-fill 和 minmax() 可以轻松创建响应式网格。
```
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}
```
此代码会创建尽可能多的列，每列最小宽度250px，最大为1fr（均分剩余空间），从而自动适应容器宽度。

圣杯布局示例：

.container {
  display: grid;
  grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
  gap: 10px;
  height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

此布局包含页头、侧边栏、主内容和页脚，是常见的网页布局模式。

💡 五、与 Flexbox 的对比

特性	CSS Grid (二维布局)	Flexbox (一维布局)
维度	行和列同时控制	一次只控制一行或一列
应用场景	整体页面布局、复杂网格结构	组件内部布局、导航栏、按行或列排列的元素
控制方式	直接定义网格轨道和区域	通过主轴和交叉轴控制弹性项目