网格布局 CSS Grid

CSS Grid 是 CSS3 提供的二维布局系统，可以同时控制行和列，比 Flexbox（一维布局）更强大，适用于复杂的网页布局设计。

一、Grid 基本概念

1、Grid 容器（Grid Container）

通过 display: grid 或 display: inline-grid 定义一个 Grid 容器：

.container {display: grid;
}

2、Grid 项目（Grid Items）

Grid 容器的直接子元素自动成为 Grid 项目：

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

3、网格线（Grid Lines）

Grid 布局由行（row）和列（column）组成，网格线是它们的边界线

二、Grid 容器属性

1、定义列和行：grid-template-columns / grid-template-rows

• grid-template-columns：定义列宽度
• grid-template-rows：定义行高度

示例：3 列（200px 1fr 200px） + 2 行（100px auto）

.container {display: grid;grid-template-columns: 200px 1fr 200px; /* 1fr = 剩余空间 */grid-template-rows: 100px auto;
}

单位说明：

fr（fraction）：剩余空间分配比例auto：自动调整大小minmax(min, max)：定义最小和最大尺寸

2、定义网格区域：grid-template-areas

通过命名区域布局：

.container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";
}
.item-header { grid-area: header; }
.item-sidebar { grid-area: sidebar; }
.item-main { grid-area: main; }
.item-footer { grid-area: footer; }

HTML 结构：

<div class="container"><div class="item-header">Header</div><div class="item-sidebar">Sidebar</div><div class="item-main">Main</div><div class="item-footer">Footer</div>
</div>

3、行列间距：gap（旧版：grid-gap）

row-gap：行间距column-gap：列间距gap：简写（row-gap column-gap）

.container {gap: 10px 20px; /* 行间距 10px，列间距 20px */
}

4、对齐方式

justify-items：所有项目在列方向的对齐（默认 stretch）start | end | center | stretchalign-items：所有项目在行方向的对齐（默认 stretch）start | end | center | stretchjustify-content：整个网格在容器列方向的对齐start | end | center | stretch | space-around | space-between | space-evenlyalign-content：整个网格在容器行方向的对齐

三、Grid 项目属性

1、项目位置：grid-column / grid-row

grid-column-start / grid-column-end：列起始和结束线grid-row-start / grid-row-end：行起始和结束线简写：grid-column: <start> / <end>;grid-row: <start> / <end>;

示例：跨 2 列 + 跨 3 行

.item {grid-column: 1 / 3; /* 从第 1 列线到第 3 列线 */grid-row: 1 / 4;    /* 从第 1 行线到第 4 行线 */
}

2、项目对齐：justify-self / align-self

justify-self：单个项目在列方向的对齐align-self：单个项目在行方向的对齐

.item {justify-self: center;align-self: end;
}

3、 项目顺序：order

调整项目的显示顺序（数值越小越靠前）：

.item {order: 1;
}

4、Grid 布局示例

1、经典 12 列网格

.container {display: grid;grid-template-columns: repeat(12, 1fr);gap: 10px;
}
.item {grid-column: span 4; /* 每项占 4 列 */
}

2、圣杯布局（Header + Sidebar + Main + Footer）

.container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-template-rows: 80px 1fr 60px;grid-template-columns: 200px 1fr;
}

3、自适应卡片布局

container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 15px;
}

auto-fill：自动填充列minmax(250px, 1fr)：最小 250px，最大占剩余空间

5、浏览器兼容性

CSS Grid 已被所有现代浏览器支持（包括 IE11+，但部分语法不同）。可以使用 @supports 检测支持情况：

@supports (display: grid) {.container {display: grid;}
}