Grid 基础

CSS Grid 布局是一种强大的二维布局系统，可以同时控制行和列，轻松创建复杂的网格结构。

1. 定义网格容器

通过设置容器的 display: grid; 或 inline-grid; 来启用网格布局。

display: grid;

2. 网格轨道（行和列）

使用 grid-template-columns 和 grid-template-rows 定义列宽和行高。

grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 150px;

也可以使用 fr 单位，表示可用空间的分数份额。

grid-template-columns: 1fr 2fr 1fr;

3. 网格间距

• grid-column-gap / column-gap：列间距
• grid-row-gap / row-gap：行间距
• gap：同时设置行列间距

gap: 10px 20px;

4. 网格项目定位

通过给子元素设置 grid-column 和 grid-row 来控制其跨越的行列。

Grid 基础示例

loading