使用 CSS Grid 核心分两步：先给父容器定义网格规则，再给子项目设置位置或尺寸，3行代码即可实现基础布局。
- 定义网格容器（父元素）
给父容器添加 display: grid ，并通过以下属性规划网格结构：
-
grid-template-columns ：定义列数和列宽（核心），例如 grid-template-columns: 100px 1fr 2fr 表示"1列固定100px，1列占1份，1列占2份"。
-
grid-template-rows ：定义行数和行高，例如 grid-template-rows: 50px auto 表示"1行固定50px，1行自适应内容"。
-
gap ：快速设置网格项目间的间距（替代 margin），例如 gap: 10px 。
- 控制网格项目（子元素）
无需额外代码，子元素会自动填充网格；也可手动定位：
-
grid-column ：控制项目占几列，例如 grid-column: 1 / 3 表示"从第1列开始，到第3列结束（占2列）"。
-
grid-row ：控制项目占几行，例如 grid-row: 2 / 4 表示"从第2行开始，到第4行结束（占2行）"。
示例：3列2行网格
/* 父容器：3列（等宽）、2行（50px+自适应）、间距10px */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3等宽列 */
grid-template-rows: 50px auto; /* 2行 */
gap: 10px;
}
/* 子项目：默认自动填充，也可手动定位 */
.grid-item:nth-child(1) {
grid-column: 1 / 3; /* 第1个项目占前2列 */
}