当前位置：首页 > news >正文

实用指南：CSS Grid布局详解

news 2026/4/2 8:12:08

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对比

特性	Grid	Flexbox
维度	二维（行和列）	一维（行或列）
布局方向	同时定义行和列	单一方向（主轴）
项目控制	可精确控制行列位置	沿主轴或交叉轴对齐
适用场景	整体页面布局、复杂二维布局	组件内部布局、一维排列