CSS Grid 布局完全指南

基础概念

Grid 是二维布局系统，可以同时控制行和列。

创建 Grid 容器

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

常用单位

/* 分数单位 */
grid-template-columns: 1fr 2fr 1fr;

/* repeat 函数 */
grid-template-columns: repeat(3, 1fr);

/* minmax 函数 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

网格线定位

.item {
  grid-column: 1 / 3;  /* 从线 1 到线 3 */
  grid-row: 1 / 2;
}

网格区域命名

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

.header { grid-area: header; }

响应式布局

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Grid 让复杂布局变得简单！