Grid布局系统深度解析

第5章: Grid布局系统深度解析

🎯 本章重点

• Grid布局核心概念
• 显式和隐式网格
• 复杂布局实战应用

📖 内容概述

5.1 Grid基础概念

容器和项目

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

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

5.2 容器属性详解

5.2.1 grid-template-columns

.container {
  /* 固定宽度列 */
  grid-template-columns: 200px 200px 200px;
  
  /* 百分比列 */
  grid-template-columns: 33.33% 33.33% 33.33%;
  
  /* fr单位（推荐） */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 混合使用 */
  grid-template-columns: 200px 1fr 2fr;
  
  /* repeat函数 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

5.2.2 grid-template-rows

.container {
  /* 固定高度行 */
  grid-template-rows: 100px 200px 150px;
  
  /* fr单位 */
  grid-template-rows: 1fr 2fr 1fr;
  
  /* minmax函数 */
  grid-template-rows: minmax(100px, auto) 1fr;
}

5.2.3 grid-template-areas

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

5.2.4 gap (grid-gap)

.container {
  gap: 20px; /* 行列间距相同 */
  gap: 10px 20px; /* 行间距 列间距 */
  
  /* 旧版语法 */
  grid-gap: 20px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

5.2.5 justify-items

.container {
  justify-items: stretch;    /* 默认：拉伸填满 */
  justify-items: start;      /* 起始对齐 */
  justify-items: end;        /* 末尾对齐 */
  justify-items: center;      /* 居中对齐 */
}

5.2.6 align-items

.container {
  align-items: stretch;      /* 默认：拉伸填满 */
  align-items: start;       /* 起始对齐 */
  align-items: end;         /* 末尾对齐 */
  align-items: center;      /* 居中对齐 */
  align-items: baseline;    /* 基线对齐 */
}

5.2.7 place-items

.container {
  place-items: center;      /* align-items + justify-items */
  place-items: start end;    /* align-items justify-items */
}

5.2.8 justify-content

.container {
  justify-content: start;    /* 默认：起始对齐 */
  justify-content: end;      /* 末尾对齐 */
  justify-content: center;    /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around;  /* 周围留白 */
  justify-content: space-evenly;  /* 均匀分布 */
}

5.2.9 align-content

.container {
  align-content: start;      /* 起始对齐 */
  align-content: end;        /* 末尾对齐 */
  align-content: center;      /* 居中对齐 */
  align-content: space-between; /* 两端对齐 */
  align-content: space-around;  /* 周围留白 */
  align-content: space-evenly;  /* 均匀分布 */
}

5.2.10 grid-auto-columns / grid-auto-rows

.container {
  grid-auto-columns: 100px; /* 隐式列宽 */
  grid-auto-rows: minmax(100px, auto); /* 隐式行高 */
}

5.2.11 grid-auto-flow

.container {
  grid-auto-flow: row;        /* 默认：按行排列 */
  grid-auto-flow: column;     /* 按列排列 */
  grid-auto-flow: dense;      /* 密集排列 */
  grid-auto-flow: row dense;  /* 按行密集排列 */
}

5.3 项目属性详解

5.3.1 grid-column

.item {
  grid-column: 1 / 3;        /* 从第1列到第3列 */
  grid-column: 1 / span 2;    /* 从第1列开始，跨越2列 */
  grid-column: col-start / col-end; /* 命名网格线 */
}

5.3.2 grid-row

.item {
  grid-row: 1 / 3;           /* 从第1行到第3行 */
  grid-row: 1 / span 2;      /* 从第1行开始，跨越2行 */
  grid-row: row-start / row-end; /* 命名网格线 */
}

5.3.3 grid-area

.item {
  grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
  grid-area: header;         /* 使用命名区域 */
}

5.3.4 justify-self

.item {
  justify-self: stretch;    /* 默认：拉伸填满 */
  justify-self: start;      /* 起始对齐 */
  justify-self: end;        /* 末尾对齐 */
  justify-self: center;      /* 居中对齐 */
}

5.3.5 align-self

.item {
  align-self: stretch;      /* 默认：拉伸填满 */
  align-self: start;       /* 起始对齐 */
  align-self: end;         /* 末尾对齐 */
  align-self: center;      /* 居中对齐 */
  align-self: baseline;    /* 基线对齐 */
}

5.3.6 place-self

.item {
  place-self: center;       /* align-self + justify-self */
  place-self: start end;    /* align-self justify-self */
}

5.4 命名网格线和区域

命名网格线

.container {
  grid-template-columns: 
    [sidebar-start] 200px 
    [sidebar-end content-start] 1fr 
    [content-end];
  grid-template-rows: 
    [header-start] 80px 
    [header-end main-start] 1fr 
    [main-end footer-start] 60px 
    [footer-end];
}

使用命名网格线

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: header-end / main-end;
}

5.5 实战布局模式

5.5.1 圣杯布局

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

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

5.5.2 卡片网格

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

5.5.3 瀑布流布局

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

.masonry-item {
  grid-row-end: span 2; /* 根据内容高度调整 */
}

5.5.4 表单布局

.form-grid {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  gap: 10px;
}

label {
  grid-column: labels;
}

input, select, textarea {
  grid-column: controls;
}

5.6 响应式Grid

移动端优先

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

自适应网格

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

5.7 特殊技巧

全屏网格

.fullscreen-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
}

.centered-content {
  place-self: center;
}

重叠元素

.overlap-container {
  display: grid;
}

.overlap-item {
  grid-area: 1 / 1; /* 所有项目重叠 */
}

复杂网格模板

.complex-grid {
  display: grid;
  grid-template:
    "header header header" 80px
    "sidebar main aside" 1fr
    "footer footer footer" 60px
    / 200px 1fr 150px;
}

💡 最佳实践

1. 语义化命名: 使用有意义的网格线名称
2. 渐进增强: 为不支持Grid的浏览器提供回退
3. 性能优化: 避免过度复杂的网格结构
4. 响应式设计: 结合媒体查询使用

🎯 下一章预览

下一章将探讨Flexbox和Grid的混合使用，以及如何选择合适的布局方案。

---

最后更新: 2024年12月