CSS Grid 布局完全指南

CSS Grid 简介

CSS Grid 是一个二维布局系统，可以同时处理行和列，是创建复杂网页布局的最佳选择。

与 Flexbox 不同，Grid 可以同时控制两个方向的布局，这使得它非常适合创建页面级别的布局。

基础概念

定义网格

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

网格项

.item {
  grid-column: 1 / 3; /* 跨越 2 列 */
  grid-row: 1 / 2;
}

常见布局模式

1. 圣杯布局

经典的三栏布局：

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

2. 卡片网格

响应式卡片布局：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

3. 响应式网格

自动适应屏幕大小：

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

高级技巧

1. 命名网格线

.container {
  display: grid;
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end content-start] 1fr
    [content-end];
}

2. 隐式网格

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

3. 对齐方式

.container {
  display: grid;
  justify-items: center; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
  place-items: center; /* 简写 */
}

Grid vs Flexbox

特性	Grid	Flexbox
维度	二维	一维
布局	行和列	行或列
用途	整体布局	组件布局
对齐	强大	灵活

实战示例

仪表板布局

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header  header"
    "sidebar content widgets";
  height: 100vh;
}

图片画廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

浏览器支持

CSS Grid 在现代浏览器中支持良好：

• Chrome 57+
• Firefox 52+
• Safari 10.1+
• Edge 16+

总结

CSS Grid 是现代网页布局的利器。它让复杂的布局变得简单，响应式设计变得直观。掌握 Grid，你的布局能力将提升一个档次。