CSS Grid 布局完全指南

CSS Grid 是一个强大的二维布局系统，能够同时处理行和列。

基本概念

Grid 容器和项目

.container {
  display: grid;
}

.item {
  /* 自动成为 grid item */
}

定义网格

固定列数

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

使用 fr 单位

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例 */
}

repeat() 函数

.grid {
  grid-template-columns: repeat(3, 1fr);  /* 3 列等宽 */
  grid-template-rows: repeat(2, 100px);   /* 2 行固定高度 */
}

间距

Gap 属性

.grid {
  gap: 20px;              /* 行和列间距相同 */
  gap: 20px 10px;         /* 行间距 20px，列间距 10px */
  row-gap: 20px;          /* 行间距 */
  column-gap: 10px;      /* 列间距 */
}

响应式网格

自动适应列数

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

自动填充列数

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

auto-fit 和 auto-fill 的区别：

• auto-fit - 收缩空列
• auto-fill - 保留空列

定位项目

指定位置

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

.item2 {
  grid-column: span 2;   /* 跨越 2 列 */
  grid-row: span 2;      /* 跨越 2 行 */
}

命名网格线

.grid {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [top] 100px [center] 100px [bottom];
}

.item {
  grid-column: start / middle;
  grid-row: top / bottom;
}

命名网格区域

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

对齐方式

整体对齐

.grid {
  justify-content: start;   /* 水平对齐 */
  align-content: center;     /* 垂直对齐 */
  place-content: center;     /* 两者都设置 */
}

项目对齐

.item {
  justify-self: start;   /* 水平对齐 */
  align-self: center;    /* 垂直对齐 */
  place-self: center;    /* 两者都设置 */
}

简写属性

.grid {
  justify-items: center;  /* 所有项目水平居中 */
  align-items: center;   /* 所有项目垂直居中 */
  place-items: center;   /* 两者都设置 */
}

实用示例

网格卡片布局

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

圣杯布局

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main ads"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

仪表盘布局

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

子网格 (Subgrid)

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-template-columns: subgrid;  /* 继承父网格 */
  grid-column: span 2;
}

总结

CSS Grid 的关键特性：

• 二维布局系统
• 灵活的网格定义
• 强大的响应式能力
• 直观的区域命名

更多详情请参考 MDN CSS Grid