CSS Subgrid：网格布局的终极进化

CSS Subgrid网格布局的终极进化当 Grid 遇见 Subgrid嵌套布局终于有了完美的解决方案。一、Subgrid 解决了什么问题作为一名追求像素级还原的 UI 匠人我深知嵌套网格的痛苦——子元素的网格线永远对不齐父元素就像两个不同节奏的鼓手。Subgrid 让子网格继承父网格的轨道定义终于实现了真正的对齐自由。二、基础用法1. 行 Subgrid.parent-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; gap: 1rem; } .child-subgrid { display: grid; grid-template-rows: subgrid; grid-row: span 3; }2. 列 Subgrid.child-subgrid { display: grid; grid-template-columns: subgrid; grid-column: span 2; }3. 行列双 Subgrid.child-subgrid { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; grid-column: span 2; grid-row: span 3; }三、实战案例卡片网格div classcard-grid article classcard img srcimage1.jpg alt h2标题一/h2 p描述文字/p button了解更多/button /article article classcard img srcimage2.jpg alt h2标题二更长一些/h2 p描述文字也更长一些测试对齐效果/p button了解更多/button /article !-- 更多卡片... -- /div.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: auto 1fr auto auto; gap: 1.5rem; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .card img { width: 100%; height: 200px; object-fit: cover; } .card h2 { padding: 1rem; margin: 0; font-size: 1.25rem; } .card p { padding: 0 1rem; margin: 0; color: #666; } .card button { margin: 1rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 6px; cursor: pointer; }四、复杂布局表单对齐.form-grid { display: grid; grid-template-columns: [label] auto [input] 1fr [button] auto; gap: 1rem; align-items: center; } .form-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } .form-row label { grid-column: label; } .form-row input { grid-column: input; } .form-row button { grid-column: button; }五、浏览器支持与降级.card { /* 降级方案 */ display: flex; flex-direction: column; } supports (grid-template-rows: subgrid) { .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } }六、最佳实践渐进增强始终提供 Flexbox 降级方案性能考量Subgrid 计算成本较高避免过度嵌套语义化保持 HTML 结构的语义完整性调试技巧使用 DevTools 的 Grid 可视化工具对齐是设计的基石Subgrid 让基石更加稳固。#css #grid #subgrid #layout #frontend