CSS Grid布局为现代网页设计带来了革命性的变化。它提供了强大的二维布局能力，能够轻松创建复杂的响应式设计。 在这篇文章中，我将分享10个实用的CSS Grid技巧，帮助你充分利用Grid的强大功能，创建灵活且高效的布局解决方案。 无论你是Grid新手还是有一定经验的开发者，这些技巧都将提升你的布局技能。
1. 使用fr单位创建灵活列
fr（fraction）单位是Grid布局中非常有用的单位，它允许你按比例分配可用空间。使用fr单位可以轻松创建灵活的自适应布局。
/* 三列布局，中间列是两侧的两倍 */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
1fr
2fr
1fr
2. 利用grid-template-areas进行直观布局
grid-template-areas属性让你可以通过命名区域来创建布局，使代码更加直观和可维护。
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Header
Sidebar
Main
Footer
3. 使用minmax()函数创建响应式布局
minmax()函数允许你为网格轨道定义大小范围，特别适合创建响应式布局。
.grid-container {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
Item 1
Item 2
Item 3
Item 4
Item 5
4. 使用grid-auto-flow控制自动放置
grid-auto-flow属性控制自动放置算法的工作方式，可以设置为row（默认）、column或dense。
/* 按列填充网格 */
.grid-container {
grid-auto-flow: column;
}
/* 使用dense填充空白 */
.grid-container {
grid-auto-flow: row dense;
}
.grid-container {
grid-auto-flow: column;
}
/* 使用dense填充空白 */
.grid-container {
grid-auto-flow: row dense;
}
Span 2
Item
Item
Span 2
5. 利用grid-column和grid-row进行精细控制
使用grid-column和grid-row属性可以精确控制网格项的位置和跨度。
/* 项目跨越两列 */
.grid-item {
grid-column: span 2;
}
/* 指定起始和结束位置 */
.grid-item {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.grid-item {
grid-column: span 2;
}
/* 指定起始和结束位置 */
.grid-item {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
1
2
3
Span 3
5
6
7
6. 使用gap属性添加间距
gap属性是grid-gap的简写，用于设置行和列之间的间距，使布局更加清晰。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px; /* 行间距30px，列间距20px */
}
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px; /* 行间距30px，列间距20px */
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
7. 使用align-items和justify-items对齐内容
这些属性控制网格项在单元格内的对齐方式，实现精确的布局控制。
/* 垂直居中所有网格项 */
.grid-container {
align-items: center;
}
/* 水平居中所有网格项 */
.grid-container {
justify-items: center;
}
.grid-container {
align-items: center;
}
/* 水平居中所有网格项 */
.grid-container {
justify-items: center;
}
1
2
3
8. 使用grid-auto-rows定义隐式行高
当网格项超出显式定义的行时，grid-auto-rows可以设置这些隐式行的高度。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 15px;
}
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 15px;
}
1
2
3
4
5
6
7
8
9. 使用grid-area简写属性
grid-area是grid-row-start、grid-column-start、grid-row-end和grid-column-end的简写形式。
/* 简写形式：行开始/列开始/行结束/列结束 */
.grid-item {
grid-area: 2 / 1 / 4 / 3;
}
/* 等同于 */
.grid-item {
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
.grid-item {
grid-area: 2 / 1 / 4 / 3;
}
/* 等同于 */
.grid-item {
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
1
2
3
grid-area: 2/1/4/3
5
10. 使用媒体查询创建响应式网格
结合媒体查询，可以为不同屏幕尺寸创建完全不同的网格布局。
/* 移动端：单列布局 */
.grid-container {
grid-template-columns: 1fr;
}
/* 平板：两列布局 */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 桌面：三列布局 */
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
.grid-container {
grid-template-columns: 1fr;
}
/* 平板：两列布局 */
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* 桌面：三列布局 */
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
移动端布局
单列显示
内容垂直排列
张玥
资深前端工程师，专注于现代Web开发技术，CSS Grid布局专家，热爱分享前端开发技巧和最佳实践。