CSS Grid 布局完全指南：从入门到实战

CSS Grid 是最强大的 CSS 布局系统，可以实现复杂的二维布局。

基本概念

容器属性

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 列定义 */
  grid-template-rows: 100px auto 100px;     /* 行定义 */
  gap: 10px;                                /* 间距 */
}

项目属性

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

列定义

/* 固定宽度 */
grid-template-columns: 200px 200px 200px;

/* 比例分配 */
grid-template-columns: 1fr 2fr 1fr;

/* 自动填充 */
grid-template-columns: repeat(3, 1fr);

/* 响应式 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

行定义

/* 固定高度 */
grid-template-rows: 100px 200px;

/* 自动高度 */
grid-template-rows: auto 1fr auto;

间距

/* 行间距和列间距 */
gap: 10px 20px;

/* 单独设置 */
row-gap: 10px;
column-gap: 20px;

常见布局示例

三栏布局

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.header { grid-column: 1 / -1; }
.footer { grid-column: 1 / -1; }

网格卡片

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

瀑布流

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

Grid vs Flexbox

最佳实践

1. Grid 做整体布局：页面结构
2. Flexbox 做组件布局：按钮、导航
3. 使用 fr 单位：比例分配
4. 使用 auto-fill/auto-fit：响应式布局

总结

CSS Grid 是最强大的布局系统。结合 Flexbox，可以实现任何复杂的布局需求。