CSS Subgrid 子网格详解

CSS Subgrid 子网格详解一、Subgrid 概述CSS Subgrid子网格是 CSS Grid 的一个强大特性允许子元素继承父网格的轨道定义。这使得嵌套网格可以对齐到父网格的网格线。1.1 基本概念Grid Container- 网格容器Grid Item- 网格项Subgrid- 子网格继承父网格的轨道二、基本用法2.1 定义父网格.parent-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 100px); gap: 20px; }2.2 定义子网格.child-grid { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }三、子网格类型3.1 列子网格.child-grid { grid-column: span 3; display: grid; grid-template-columns: subgrid; }3.2 行子网格.child-grid { grid-row: span 2; display: grid; grid-template-rows: subgrid; }3.3 双向子网格.child-grid { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }四、实战案例4.1 卡片网格布局.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; } .card-image { grid-row: 1; } .card-title { grid-row: 2; } .card-content { grid-row: 3; }4.2 表单布局.form { display: grid; grid-template-columns: 150px 1fr; gap: 10px; } .form-group { grid-column: span 2; display: grid; grid-template-columns: subgrid; } .form-group label { grid-column: 1; } .form-group input { grid-column: 2; }4.3 复杂布局.layout { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; } .header { grid-column: 1 / -1; } .sidebar { grid-column: 1 / 4; grid-row: 2; } .main-content { grid-column: 4 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; gap: 20px; } .widget { grid-column: span 4; } .footer { grid-column: 1 / -1; }五、对齐和间距5.1 继承间距.parent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .child-grid { grid-column: span 2; display: grid; grid-template-columns: subgrid; /* 继承父网格的 gap */ }5.2 自定义间距.child-grid { grid-column: span 2; display: grid; grid-template-columns: subgrid; gap: 10px; /* 覆盖父网格间距 */ }六、浏览器兼容性属性ChromeFirefoxSafariEdgesubgrid1177116117七、总结Subgrid 是强大的网格特性列子网格- grid-template-columns: subgrid行子网格- grid-template-rows: subgrid双向子网格- 同时继承行列轨道继承间距- 自动继承父网格的 gap对齐- 子元素自动对齐到父网格线合理使用可以创建更精确的布局对齐。