CSS Grid 布局总结

CSS Grid 布局总结

基本概念

CSS Grid 布局是一个二维布局系统，可以同时处理行和列的布局，非常适合构建复杂的网页布局。

容器属性

定义网格

css

.container {
  display: grid; /* 或 inline-grid */
}

网格轨道（行和列）

css

.container {
  /* 定义列 */
  grid-template-columns: 100px 1fr 2fr;
  /* 定义行 */
  grid-template-rows: 50px auto 100px;
  
  /* 使用 repeat() 函数 */
  grid-template-columns: repeat(3, 1fr);
  
  /* 使用 minmax() */
  grid-template-columns: 1fr minmax(200px, 1fr);
}

网格间隙

css

.container {
  /* 行列间隙相同 */
  gap: 10px;
  
  /* 分别设置行列间隙 */
  row-gap: 10px;
  column-gap: 20px;
}

网格区域命名

css

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

隐式网格

css

.container {
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: 50px;
  grid-auto-flow: row; /* 或 column, row dense, column dense */
}

对齐方式 ★★★

css

.container {
  /* 主轴对齐 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 交叉轴对齐 */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 网格项在单元格内的对齐 */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

子项（网格项）属性

放置位置

css

.item {
  /* 基于线定位 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  
  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  
  /* span 关键字 */
  grid-column: 1 / span 2;
  
  /* 基于区域名称 */
  grid-area: header;
}

对齐方式

css

.item {
  /* 单个项目在单元格内的对齐 */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

实用函数

repeat()

css

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

minmax()

css

.container {
  grid-template-columns: 1fr minmax(300px, 2fr);
}

fit-content()

css

.container {
  grid-template-columns: fit-content(300px);
}

响应式设计技巧

媒体查询调整网格

css

.container {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 2fr;
  }
}

自动填充/适应

css

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

注意事项

1. Grid 布局与 Flexbox 可以结合使用
2. 旧版浏览器支持可能需要前缀或替代方案
3. 网格线编号从1开始（不是0）
4. 可以使用 grid 简写属性，但不太直观

Grid 布局提供了强大的二维布局能力，适合构建复杂的页面结构，是现代 CSS 布局的重要组成部分。