Grid 布局详细总结
1. 基本概念
容器 (Grid Container): 使用 display: grid; 的元素就是网格容器,它包含所有的网格项目。 项目 (Grid Item): 容器内的直接子元素称为网格项目,应用网格布局属性。 轨道 (Grid Track): 水平方向的轨道是行 (row),垂直方向的轨道是列 (column)。 单元格 (Grid Cell): 行和列交叉形成的区域,称为单元格。 网格线 (Grid Line): 每一行和列的分隔线,称为网格线,可以通过行号和列号定位元素。
2. 定义网格布局
通过 grid-template-columns 和 grid-template-rows 定义行和列
指定容器的列和行结构:
css
.container {
display: grid;
grid-template-columns: 100px 200px 1fr; /* 三列布局 */
grid-template-rows: 50px auto; /* 两行布局 */
}
- 100px、200px 表示固定列宽。
- 1fr 是一种弹性单位,表示分配剩余空间。
- auto 行高自适应内容。
- 网格间隙 gap
gap 设置行和列之间的间隙:
css
.container {
gap: 10px; /* 设置行列间的间隙 */
}
或者分别设置行和列的间隙:
css
.container {
row-gap: 10px;
column-gap: 20px;
}
网格项目的放置
可以用网格线定位项目的位置和大小。
grid-column 和 grid-row 指定项目所占的行和列:
css
.item1 {
grid-column: 1 / 3; /* 从第 1 列跨到第 3 列 */
grid-row: 1 / 2; /* 从第 1 行跨到第 2 行 */
}
- grid-column 和 grid-row 指定项目从哪一条网格线开始到哪一条网格线结束。
- grid-column-start、grid-column-end、grid-row-start、grid-row-end
可以分别指定起始和结束的行或列网格线:
css
复制代码
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
grid-area
grid-area 可直接指定项目的行和列位置,简写为:grid-row-start / grid-column-start / grid-row-end / grid-column-end。
css
复制代码
.item1 {
grid-area: 1 / 1 / 2 / 3;
}
重复 (repeat) 和最小最大 (minmax) 单位
repeat 函数 使用 repeat() 简化重复的行或列定义:
css
复制代码
.container {
grid-template-columns: repeat(3, 1fr); /* 创建 3 列,宽度均为 1fr */
}
minmax 函数 minmax() 用于定义列或行的最小和最大尺寸:
css
复制代码
.container {
grid-template-columns: minmax(100px, 1fr); /* 列宽在 100px 到 1fr 之间自适应 */
}
自动排列网格项目
auto-fill 和 auto-fit 结合 repeat 实现自适应列的网格布局:
auto-fill: 尽可能多地填充列,即使某些列为空。 auto-fit: 填满容器后会缩放项目,以填充剩余空间。
css
复制代码
.container {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
对齐和分布
在容器中对齐
- justify-items: 控制项目在列方向的对齐方式。
- align-items: 控制项目在行方向的对齐方式。
- place-items: 同时设置 align-items 和 justify-items。
css
复制代码
.container {
place-items: center; /* 项目居中对齐 */
}
在容器内分布
- justify-content: 控制整个网格在容器内的水平方向分布。
- align-content: 控制整个网格在容器内的垂直方向分布。
- place-content: 同时设置 align-content 和 justify-content。
css
复制代码
.container {
place-content: center; /* 整个网格居中 */
}
网格模板区域
可以命名网格的区域,用 grid-template-areas 生成布局:
css
复制代码
.container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
这种方法简化了布局定义,尤其适用于较复杂的页面结构。