CSS Grid 布局指南

学习用于二维布局的 CSS Grid。使用 grid-template 和 grid-area 创建复杂的响应式设计。

Grid 基础

CSS Grid 是一种二维布局系统，可同时控制行和列：

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

定义网格

grid-template-columns

定义列的大小和数量

grid-template-columns: 200px 1fr 1fr; /* 固定 + 弹性 */
grid-template-columns: repeat(3, 1fr); /* 3 等分 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-template-rows

定义行的大小

grid-template-rows: 100px auto 100px;

间距和对齐

gap行列间距

row-gap行间距

column-gap列间距

justify-items水平对齐项目

align-items垂直对齐项目

place-items简写属性

网格区域

.container {
  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; }

常见布局示例

响应式网格

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

圣杯布局

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
}