当前位置：首页 > news >正文

CSS 子网格（Subgrid）完全指南

news 2026/5/14 12:39:04

CSS 子网格（Subgrid）完全指南

引言

CSS 子网格（Subgrid）是 CSS Grid 布局的高级特性，它允许子元素继承父网格的轨道定义。本文将深入探讨子网格的各种用法和高级技巧。

基础概念回顾

什么是子网格

子网格允许网格容器的直接子元素使用其父网格的轨道定义，而不是创建新的网格。

基本语法

.parent { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 100px); } .child { grid-column: span 2; display: grid; grid-template-columns: subgrid; }

高级技巧一：列子网格

创建列子网格

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; } .card { grid-column: span 3; display: grid; grid-template-columns: subgrid; } .card-title { grid-column: 1; } .card-content { grid-column: 2 / span 2; }

完整示例

<div class="grid"> <div class="card"> <h3 class="card-title">标题</h3> <p class="card-content">内容...</p> </div> </div>

高级技巧二：行子网格

创建行子网格

.grid { display: grid; grid-template-rows: auto 1fr auto; height: 400px; } .panel { grid-row: span 3; display: grid; grid-template-rows: subgrid; } .panel-header { grid-row: 1; } .panel-body { grid-row: 2; } .panel-footer { grid-row: 3; }

完整示例

<div class="grid"> <div class="panel"> <div class="panel-header">头部</div> <div class="panel-body">主体</div> <div class="panel-footer">底部</div> </div> </div>

高级技巧三：双向子网格

同时使用行列子网格

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 100px); gap: 1rem; } .nested-grid { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .item { grid-column: 1 / span 2; grid-row: 1; }

复杂布局示例

<div class="grid"> <div class="nested-grid"> <div class="item">跨两列一行</div> <div class="item">第一列第二行</div> <div class="item">第二列第二行</div> </div> </div>

高级技巧四：子网格与自动布局

自动填充子网格

.parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .child { grid-column: span 2; display: grid; grid-template-columns: subgrid; }

响应式子网格

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .card { grid-column: span 1; display: grid; grid-template-columns: subgrid; } @media (min-width: 768px) { .card { grid-column: span 2; } }

实战案例：卡片布局

<div class="card-grid"> <div class="card"> <img src="image.jpg" alt="图片" class="card-image"> <div class="card-body"> <h3 class="card-title">标题</h3> <p class="card-text">描述文字...</p> <button class="card-button">按钮</button> </div> </div> </div>

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .card { grid-column: span 1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr auto; gap: 1rem; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } .card-image { grid-column: 1; grid-row: 1; width: 100%; height: 200px; object-fit: cover; } .card-body { grid-column: 1; grid-row: 2; padding: 1rem; display: grid; grid-template-rows: auto 1fr auto; gap: 0.5rem; } .card-title { margin: 0; } .card-text { margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .card-button { grid-row: 3; justify-self: end; }

实战案例：表单布局

<form class="form-grid"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name"> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" name="email"> </div> <div class="form-group full-width"> <label for="message">留言</label> <textarea id="message" name="message"></textarea> </div> <button type="submit">提交</button> </form>

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 600px; } .form-group { display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; gap: 0.25rem; } .form-group.full-width { grid-column: span 2; } label { grid-column: 1; font-weight: bold; } input, textarea { grid-column: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } textarea { resize: vertical; min-height: 100px; } button { grid-column: span 2; justify-self: end; padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; }

实战案例：仪表盘布局

<div class="dashboard"> <header class="dashboard-header">头部</header> <aside class="dashboard-sidebar">侧边栏</aside> <main class="dashboard-main"> <div class="stats-grid"> <div class="stat-card">统计1</div> <div class="stat-card">统计2</div> <div class="stat-card">统计3</div> </div> <div class="content-area">内容区域</div> </main> </div>

.dashboard { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 60px 1fr; height: 100vh; } .dashboard-header { grid-column: span 2; grid-row: 1; } .dashboard-sidebar { grid-column: 1; grid-row: 2; } .dashboard-main { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: auto 1fr; gap: 1rem; padding: 1rem; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .stat-card { padding: 1rem; background: #f8f9fa; border-radius: 8px; } .content-area { background: #f8f9fa; border-radius: 8px; padding: 1rem; }

常见问题与解决方案

Q1：浏览器兼容性如何？

A：子网格支持情况：

Chrome: 117+
Firefox: 71+
Safari: 16+
Edge: 117+

Q2：如何处理不支持的浏览器？

A：提供回退方案：

.child { display: grid; grid-template-columns: repeat(2, 1fr); /* 回退 */ } @supports (grid-template-columns: subgrid) { .child { grid-template-columns: subgrid; } }

Q3：子网格与嵌套网格的区别？

A：嵌套网格创建独立的网格轨道，而子网格继承父网格的轨道定义。

最佳实践

1. 保持网格结构清晰

/* 推荐 */ .parent { grid-template-columns: repeat(4, 1fr); } .child { grid-column: span 2; grid-template-columns: subgrid; } /* 不推荐 */ .child { grid-column: span 2; grid-template-columns: repeat(2, 1fr); /* 重复定义 */ }

2. 使用子网格对齐内容

.card { display: grid; grid-template-columns: subgrid; } .card img { grid-column: 1 / -1; /* 跨所有列 */ }

3. 配合 gap 使用

.parent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .child { grid-column: span 2; display: grid; grid-template-columns: subgrid; gap: inherit; /* 继承父级 gap */ }