文章目录
- 1. 概念
- 2. 组成
- 2.1. 网格行
- 2.2. 网格列
- 2.3. 网格间距
- 2.4. 网格线
- 2.5. 网格容器
- 2.6. fr 单位
- 3. 网格跨行跨列
- 3.1. 跨列
- 3.2. 跨行
- 4. 网格布局案例
- 4.1. 演示效果
- 4.2. 分析思路
- 4.3. 代码实现
1. 概念
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
2. 组成
2.1. 网格行
网格元素的水平线方向称为行（Row）。
2.2. 网格列
网格元素的垂直线方向称为列（Column）。
2.3. 网格间距
网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。
| 属性 | 作用 |
|---|---|
| grid-column-gap | 设置列之间的网格间距。 |
| grid-row-gap | 设置行之间的网格间距。 |
| grid-gap | 是 grid-row-gap 和 the grid-column-gap 属性的简写。 |
通常我们用 gap 表示元素的间隙。
2.4. 网格线
列与列，行与行之间的交接处。
2.5. 网格容器
将 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。
| 属性 | 值 |
|---|---|
| grid-template-columns | 网格布局中的列的数量。 每一列的宽度。 |
| grid-template-rows | 网格布局中的行的数量。 每一行的高度。 |
2.6. fr 单位
网格引入了 fr 单位来帮助我们创建灵活的网格轨道。
一个 fr 单位代表网格容器中可用空间的一等份。
3. 网格跨行跨列
3.1. 跨列
| 属性 | 值 |
|---|---|
| grid-column-start | 网格元素列的开始位置。 |
| grid-column-end | 网格元素列的结束位置。 |
| grid-column | grid-column-start 和 grid-column-end 属性的简写属性。 |
3.2. 跨行
| 属性 | 值 |
|---|---|
| grid-row-start | 网格元素行的开始位置。 |
| grid-row-end | 网格元素列的开始位置。 |
| grid-row | grid-row-start 和 grid-row-end 属性的简写属性。 |
4. 网格布局案例
4.1. 演示效果
4.2. 分析思路
4.3. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
/* 开启grid布局 */
display: grid;
/* fr代表可用空间的1等分 */
grid-template-columns: 1fr 1fr 1fr 1fr;
/* 设置行和列的间隙 */
gap: 10px;
background: lightblue;
padding: 10px;
}
.box div {
padding: 20px;
background: pink;
text-align: center;
}
.item1 {
grid-column: 1/5;
}
.item2 {
grid-row: 2/4;
}
.item3 {
grid-column: 2/4;
}
.item5 {
grid-column: 2/5;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">头部</div>
<div class="item2">菜单</div>
<div class="item3">主要内容</div>
<div class="item4">右侧</div>
<div class="item5">底部</div>
</div>
</body>
</html>
