CSS3 网格布局（Grid）常用属性
容器属性
display: grid; 或 display: inline-grid;
将元素定义为网格容器，子元素自动成为网格项。
grid-template-columns 和 grid-template-rows
定义网格的列和行大小。支持固定值（如 px）、百分比（%）或弹性单位（fr）。
示例：grid-template-columns: 100px 1fr 2fr; 表示三列，第一列固定宽度，后两列按比例分配剩余空间。
grid-template-areas
通过命名区域布局，需配合子项的 grid-area 使用。
示例：
.container {
grid-template-areas:
"header header"
"sidebar main";
}
.header { grid-area: header; }
gap（或 grid-gap）
设置行与列之间的间距。
示例：gap: 10px 20px; 分别定义行间距和列间距。
justify-items 和 align-items
控制网格项在单元格内的水平/垂直对齐方式（如 start、center、end）。
justify-content 和 align-content
当网格总尺寸小于容器时，控制整个网格的对齐方式（如 space-around、space-between）。
子项属性
grid-column 和 grid-row
定义子项占据的网格线范围。
示例：grid-column: 1 / 3; 表示从第1列跨越到第3列。
grid-area
为子项指定命名区域（需容器使用 grid-template-areas）或直接定义位置。
示例：grid-area: 1 / 1 / 3 / 2;（行起始/列起始/行结束/列结束）。
justify-self 和 align-self
单独控制某个子项在单元格内的对齐方式。
实用案例
案例1：基本网格布局
.container {
display: grid;
/* 定义列轨道（宽度）：3列，分别为 100px、1fr、20% */
grid-template-columns: 100px 1fr 20%;
/* 定义行轨道（高度）：2行，分别为 50px、auto（自适应内容） */
grid-template-rows: 50px auto;
/* 轨道间距（行间距 + 列间距） */
gap: 10px; /* 等价于 row-gap: 10px; column-gap: 10px; */
}
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
repeat(次数，轨道大小)
-
次数：指定轨道重复的数量（可以是具体数字，或
auto-fit/auto-fill等关键字）。 -
轨道大小：每次重复的轨道尺寸（如
100px、1fr、minmax(100px, 1fr)等）。 -
1. 固定数量的等宽 / 等高轨道
例如，创建 3 列，每列宽度为
100px：
.container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 等价于 100px 100px 100px */
}
2. 结合 fr 单位创建弹性轨道
创建 4 列，每列宽度按比例分配剩余空间：
.container {
grid-template-columns: repeat(4, 1fr); /* 等价于 1fr 1fr 1fr 1fr */
}
案例2：响应式布局（auto-fit/auto-fill）
结合 minmax() 实现自适应列数（根据容器宽度自动调整）：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
解释：自动填充尽可能多的列，每列最小200px，空间不足时换行。
案例3：复杂区域布局
<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Main</main>
</div>
网格项属性（关键）
1. 定位网格项（通过网格线）
.item {
/* 列方向：从第 1 根线到第 3 根线（跨 2 列） */
grid-column: 1 / 3; /* 等价于 grid-column-start: 1; grid-column-end: 3; */
/* 行方向：从第 2 根线到第 4 根线（跨 2 行） */
grid-row: 2 / 4;
}
- 可使用
span表示跨越的轨道数：grid-column: 1 / span 2（从第 1 列开始，跨 2 列）。
2. 定位网格项（通过区域名）
配合容器的 grid-template-areas 使用：
.header {
grid-area: header; /* 对应容器中定义的 header 区域 */
}
.sidebar {
grid-area: sidebar;
}
3. 对齐方式
-
容器内对齐（所有项整体）：
.container { justify-content: center; /* 水平方向对齐（主轴） */ align-content: center; /* 垂直方向对齐（交叉轴） */ }单个项对齐：
-
.item { justify-self: end; /* 单个项水平对齐 */ align-self: center; /* 单个项垂直对齐 */ }
3. 多列布局模块（column-* 属性）
CSS 专门提供了 column-* 属性，适合文本内容的多列排版（类似报纸排版）。
.container {
columns: 3; /* 分为3列 */
column-gap: 20px; /* 列间距 */
column-rule: 1px solid #***c; /* 列分隔线 */
/* 不允许盒子被切割*/
break-inside:avoid-column;
-webkit-column-break-inside:avoid;
}
特点：
- 内容会自动在列之间流动
- 适合纯文本或相似元素的排版
- 可通过
column-width指定最小列宽（自动计算列数）
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
grid-template-columns: 150px 1fr;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
效果：顶部通栏Header，左侧固定宽度Sidebar，右侧自适应Main。
Grid 布局优势
- 二维布局：同时控制行和列，比 Flexbox（一维）更适合复杂布局。
- 精确控制：通过网格线、区域名等方式精确定位元素。
- 响应式友好：结合
auto-fit和minmax()轻松实现自适应。
Grid 布局适合整体页面框架、卡片网格、仪表盘等复杂布局场景，与 Flexbox 配合使用可覆盖绝大多数布局需求。
