CSS Grid布局详解

CSS Grid布局详解

CSS Grid布局是CSS中最强大的布局系统，它是一个二维布局系统，可以同时处理行和列，非常适合创建复杂的网页布局。

一、Grid基本概念

1.1 容器和项目

• Grid容器：使用display: grid或display: inline-grid的元素

• Grid项目：Grid容器的直接子元素

css

.container { display: grid; /* 或 inline-grid */ }

1.2 网格线

• 构成网格结构的分界线

• 分为水平网格线（行网格线）和垂直网格线（列网格线）

1.3 网格轨道

• 两条相邻网格线之间的空间

• 即行或列

1.4 网格单元格

• 四条网格线围成的区域

• 最小的网格单位

1.5 网格区域

• 一个或多个相邻的网格单元格组成的矩形区域

二、Grid容器属性

2.1 定义网格列和行

css

.container { /* 定义列：三列，宽度分别为100px、auto、200px */ grid-template-columns: 100px auto 200px; /* 定义行：三行，高度分别为100px、150px、auto */ grid-template-rows: 100px 150px auto; /* 使用fr单位（分数单位） */ grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */ /* 使用repeat()函数 */ grid-template-columns: repeat(3, 1fr); /* 创建3个等宽的列 */ grid-template-columns: repeat(4, 100px); /* 创建4个100px宽的列 */ grid-template-columns: 100px repeat(2, 1fr) 200px; /* 混合使用 */ /* 定义网格区域 */ grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; }

2.2 网格间距

css

.container { /* 列间距 */ column-gap: 20px; /* 行间距 */ row-gap: 15px; /* 简写：row-gap column-gap */ gap: 15px 20px; /* 统一设置行列间距 */ gap: 15px; }

2.3 隐式网格

当项目被放置在显式定义的网格之外时，浏览器会自动创建隐式网格轨道。

css

.container { /* 定义隐式行的大小 */ grid-auto-rows: 100px; /* 定义隐式列的大小 */ grid-auto-columns: 150px; /* 控制自动放置算法 */ grid-auto-flow: row; /* 默认值，按行填充 */ grid-auto-flow: column; /* 按列填充 */ grid-auto-flow: dense; /* 密集填充，尝试填充前面的空隙 */ }

2.4 对齐方式

css

.container { /* 主轴（水平）对齐 - 整个网格在容器中的水平位置 */ justify-content: start | end | center | stretch | space-around | space-between | space-evenly; /* 交叉轴（垂直）对齐 - 整个网格在容器中的垂直位置 */ align-content: start | end | center | stretch | space-around | space-between | space-evenly; /* 网格项在网格区域内的水平对齐 */ justify-items: start | end | center | stretch; /* 网格项在网格区域内的垂直对齐 */ align-items: start | end | center | stretch; /* 简写：align-items justify-items */ place-items: center stretch; }

三、Grid项目属性

3.1 项目定位

css

.item { /* 指定项目从哪条列网格线开始 */ grid-column-start: 2; /* 指定项目从哪条列网格线结束 */ grid-column-end: 4; /* 指定项目从哪条行网格线开始 */ grid-row-start: 1; /* 指定项目从哪条行网格线结束 */ grid-row-end: 3; /* 简写：grid-row-start / grid-column-start / grid-row-end / grid-column-end */ grid-area: 1 / 2 / 3 / 4; /* 使用span关键字 */ grid-column: 2 / span 2; /* 从第2列开始，跨越2列 */ grid-row: 1 / span 3; /* 从第1行开始，跨越3行 */ }

3.2 指定网格区域

css

.item { /* 引用grid-template-areas定义的区域名 */ grid-area: header; }

3.3 单个项目对齐

css

.item { /* 单个项目在网格区域内的水平对齐 */ justify-self: start | end | center | stretch; /* 单个项目在网格区域内的垂直对齐 */ align-self: start | end | center | stretch; /* 简写：align-self justify-self */ place-self: center end; }

四、实用示例

4.1 基础网格布局

css

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; } .item { background-color: #f0f0f0; padding: 20px; text-align: center; }

4.2 经典页面布局

css

.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; height: 100vh; gap: 10px; } .header { grid-area: header; background: #3498db; } .sidebar { grid-area: sidebar; background: #2ecc71; } .main { grid-area: main; background: #ecf0f1; } .footer { grid-area: footer; background: #34495e; }

4.3 响应式网格

css

.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } /* 媒体查询结合Grid */ @media (max-width: 768px) { .container { grid-template-columns: 1fr; } .container { grid-template-areas: "header" "main" "sidebar" "footer"; } }

4.4 复杂网格布局

css

.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 100px); gap: 10px; } .item-1 { grid-column: 1 / span 2; grid-row: 1; } .item-2 { grid-column: 3 / span 2; grid-row: 1 / span 2; } .item-3 { grid-column: 1; grid-row: 2 / span 2; } .item-4 { grid-column: 2 / span 3; grid-row: 3; }

五、Grid函数

5.1 repeat() 函数

css

.container { /* 重复模式 */ grid-template-columns: repeat(3, 100px); /* 3列，每列100px */ /* 自动填充 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动适应 */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

5.2 minmax() 函数

css

.container { /* 列宽最小200px，最大1fr */ grid-template-columns: minmax(200px, 1fr) 1fr; /* 与repeat结合 */ grid-template-columns: repeat(3, minmax(100px, 300px)); }

5.3 fit-content() 函数

css

.container { /* 宽度不超过300px，但可以小于内容宽度 */ grid-template-columns: fit-content(300px) 1fr; }

六、浏览器兼容性

• 现代浏览器全面支持

• IE10/11支持旧版Grid语法（带-ms-前缀）

• 建议使用Autoprefixer处理兼容性

七、Grid与Flexbox对比

总结

CSS Grid布局是现代网页布局的强大工具，特别适合构建复杂的二维布局。它提供了更直观、更灵活的方式来控制网页元素的位置和大小，大大简化了传统布局方法的复杂性。

在实际项目中，通常结合Grid（用于整体布局）和Flexbox（用于组件内部布局）使用，以获得最佳的布局效果。