grid ⽹格布局
CSS Grid 布局是一种强大的二维布局系统，允许开发者通过行和列的方式来创建复杂的网页布局。与传统的布局方式（如浮动、Flexbox）相比，Grid 布局更加灵活和直观，适合构建复杂的网格结构。
1. 基本概念
1.1 网格容器（Grid Container）
通过将元素的 display 属性设置为 grid 或 inline-grid，可以将其定义为网格容器。
.container {
display: grid;
}
1.2 网格项（Grid Items）
网格容器内的直接子元素称为网格项。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1.3 网格线（Grid Lines）
网格线是网格的行和列的分界线，用于定位网格项。
1.4 网格轨道（Grid Track）
网格轨道是相邻两条网格线之间的空间，分为行轨道和列轨道。
1.5 网格单元格（Grid Cell）
网格单元格是行和列的交叉区域，是网格布局的最小单位。
1.6 网格区域（Grid Area）
网格区域是由一个或多个网格单元格组成的矩形区域。
2. 定义网格
2.1 定义行和列
通过 grid-template-rows 和 grid-template-columns 定义网格的行和列。
示例
.container {
display: grid;
grid-template-rows: 100px 200px; /* 两行，高度分别为 100px 和 200px */
grid-template-columns: 1fr 2fr; /* 两列，宽度比例为 1:2 */
}
常用单位
fr：比例单位，表示剩余空间的分配比例。px、em、rem：固定单位。auto：自动分配空间。minmax(min, max)：定义最小和最大尺寸。
2.2 定义网格区域
通过 grid-template-areas 定义网格区域，并通过 grid-area 将网格项分配到指定区域。
示例
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
3. 网格项的定位
3.1 通过网格线定位
通过 grid-row 和 grid-column 指定网格项的位置。
示例
.item {
grid-row: 1 / 3; /* 从第 1 行到第 3 行 */
grid-column: 2 / 4; /* 从第 2 列到第 4 列 */
}
简写
grid-row: start / endgrid-column: start / end
3.2 通过网格区域定位
通过 grid-area 将网格项分配到指定区域。
示例
.item {
grid-area: header; /* 分配到 header 区域 */
}
4. 网格间距
通过 gap 属性设置网格项之间的间距。
示例
.container {
gap: 10px; /* 行和列的间距均为 10px */
row-gap: 10px; /* 行间距 */
column-gap: 20px; /* 列间距 */
}
5. 对齐方式
5.1 网格容器对齐
通过 justify-content 和 align-content 控制网格在容器内的对齐方式。
示例
.container {
justify-content: center; /* 水平居中 */
align-content: center; /* 垂直居中 */
}
5.2 网格项对齐
通过 justify-items 和 align-items 控制网格项在单元格内的对齐方式。
示例
.container {
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
5.3 单个网格项对齐
通过 justify-self 和 align-self 控制单个网格项的对齐方式。
示例
.item {
justify-self: start; /* 水平靠左 */
align-self: end; /* 垂直靠下 */
}
6. 隐式网格
当网格项超出显式定义的网格时，浏览器会自动创建隐式网格。可以通过 grid-auto-rows 和 grid-auto-columns 控制隐式网格的大小。
示例
.container {
grid-auto-rows: 100px; /* 隐式行高度为 100px */
grid-auto-columns: 1fr; /* 隐式列宽度为 1fr */
}
7. 重复和自动填充
7.1 repeat() 函数
用于重复定义行或列。
示例
.container {
grid-template-columns: repeat(3, 1fr); /* 3 列，每列宽度为 1fr */
}
7.2 auto-fill 和 auto-fit
用于自动填充或适应容器空间。
示例
.container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充 */
}
8. 示例：完整网格布局
以下是一个完整的网格布局示例：
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
.container {
display: grid;
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
9. 总结
CSS Grid 布局的核心概念包括：
- 网格容器和网格项。
- 网格线、网格轨道、网格单元格和网格区域。
- 通过
grid-template-rows和grid-template-columns定义网格。 - 通过
grid-row、grid-column和grid-area定位网格项。 - 通过
gap设置间距。 - 通过
justify-content、align-content、justify-items、align-items等属性控制对齐方式。
Grid 布局功能强大且灵活，适合构建复杂的网页布局！
