CSS Grid 布局完全指南

CSS Grid 是现代 CSS 中最强大的布局系统之一。本文将带你从零掌握它。

基础概念

创建一个 Grid 容器非常简单：

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

常用属性

grid-template-columns / rows

定义网格的列和行：

grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;

grid-area

命名网格区域：

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

响应式布局

Grid 天然支持响应式设计：

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

总结

CSS Grid 让复杂布局变得简单，是现代前端开发不可或缺的技能。