CSS Subgrid 子网格详解：构建复杂布局
引言
CSS Grid 布局已经成为现代 Web 布局的标准，但在处理嵌套网格时，传统 Grid 有其局限性。CSS Subgrid（子网格）解决了这个问题，允许子元素继承父网格的轨道定义，实现更复杂的布局效果。
什么是 Subgrid
Subgrid 是 CSS Grid Level 2 的一个新特性，它允许网格容器的直接子元素使用其父网格的轨道定义，而不是创建自己独立的网格。
传统 Grid vs Subgrid
/* 传统 Grid */ .parent { display: grid; grid-template-columns: repeat(3, 1fr); } .child { display: grid; grid-template-columns: repeat(3, 1fr); /* 需要重新定义 */ } /* Subgrid */ .parent { display: grid; grid-template-columns: repeat(3, 1fr); } .child { display: grid; grid-template-columns: subgrid; /* 继承父网格 */ }基础用法
列子网格
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .grid-item { grid-column: span 2; display: grid; grid-template-columns: subgrid; } .grid-item-child { background: #667eea; padding: 1rem; }行子网格
.grid-container { display: grid; grid-template-rows: repeat(3, auto); gap: 1rem; } .grid-item { grid-row: span 2; display: grid; grid-template-rows: subgrid; }同时继承行列
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); gap: 1rem; } .grid-item { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }实战案例
卡片布局
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; background: white; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .card-image { grid-row: span 1; aspect-ratio: 16/9; background: linear-gradient(135deg, #667eea, #764ba2); } .card-content { grid-row: span 2; padding: 1.25rem; } .card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .card-description { color: #64748b; line-height: 1.5; }表单布局
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 600px; margin: 0 auto; } .form-row { display: grid; grid-template-columns: subgrid; grid-column: span 2; } .form-group { padding: 0.75rem; } .form-label { display: block; font-weight: 500; margin-bottom: 0.25rem; } .form-input { width: 100%; padding: 0.5rem; border: 2px solid #e2e8f0; border-radius: 0.375rem; } .form-button { grid-column: span 2; padding: 0.75rem; background: #667eea; color: white; border: none; border-radius: 0.375rem; font-weight: 500; }日历布局
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; max-width: 600px; margin: 0 auto; } .calendar-header { display: grid; grid-template-columns: subgrid; grid-column: span 7; background: #f1f5f9; } .calendar-day-name { padding: 0.5rem; text-align: center; font-weight: 600; font-size: 0.75rem; color: #64748b; } .calendar-body { display: grid; grid-template-columns: subgrid; grid-column: span 7; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: white; border-radius: 0.25rem; cursor: pointer; } .calendar-day:hover { background: #e0e7ff; } .calendar-day.today { background: #667eea; color: white; }高级技巧
混合固定和子网格
.grid-container { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 1rem; } .grid-item { grid-column: span 3; display: grid; grid-template-columns: subgrid; }嵌套子网格
.outer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .middle-grid { grid-column: span 2; display: grid; grid-template-columns: subgrid; gap: 0.5rem; } .inner-grid { grid-column: span 2; display: grid; grid-template-columns: subgrid; }配合 minmax 使用
.grid-container { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 1rem; } .grid-item { grid-column: span 2; display: grid; grid-template-columns: subgrid; }兼容性处理
检测浏览器支持
if (CSS.supports('grid-template-columns: subgrid')) { // 支持 subgrid enableSubgrid(); } else { // 降级方案 fallbackToRegularGrid(); }CSS 降级
.grid-item { /* 降级方案 */ display: grid; grid-template-columns: repeat(2, 1fr); /* 现代浏览器 */ @supports (grid-template-columns: subgrid) { grid-template-columns: subgrid; } }最佳实践
1. 明确网格结构
/* Good */ .parent { display: grid; grid-template-columns: repeat(4, 1fr); } .child { grid-column: span 2; display: grid; grid-template-columns: subgrid; } /* Bad - 不明确的跨度 */ .child { display: grid; grid-template-columns: subgrid; /* 需要明确 grid-column */ }2. 合理使用 gap
.parent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .child { grid-column: span 2; display: grid; grid-template-columns: subgrid; gap: 0.5rem; /* 子网格可以有自己的 gap */ }3. 配合其他布局
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .grid-item { display: grid; grid-template-columns: subgrid; grid-column: span 2; } .flex-content { display: flex; gap: 0.75rem; align-items: center; }总结
CSS Subgrid 是一个强大的布局工具，它让嵌套网格能够继承父网格的轨道定义，实现更复杂、更一致的布局。通过合理使用 Subgrid，我们可以创建出更加灵活和可维护的布局方案。
关键要点：
- 使用
grid-template-columns: subgrid继承列轨道 - 使用
grid-template-rows: subgrid继承行轨道 - 需要明确指定
grid-column或grid-row的跨度 - 可以混合使用固定轨道和子网格
虽然 Subgrid 的浏览器支持还在完善中，但它已经成为现代 CSS 布局的重要组成部分，值得我们学习和掌握。
