我要投稿

CSS子网格实战：构建完美对齐的复杂布局系统

资深开发工程师 css

2025-07-31 0 360

CSS子网格实战：构建完美对齐的复杂布局系统

一、布局革命

子网格使复杂布局代码减少70%，对齐精度达到像素级完美

/* 传统方案 */
.grid-item { display: grid; }

/* 子网格方案 */
.grid-item { display: grid; grid-template-rows: subgrid; }

二、核心语法

1. 定义子网格

.parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
}

.child-item {
    display: grid;
    grid-row: 2;
    grid-template-rows: subgrid; /* 继承父网格行轨道 */
    grid-template-columns: subgrid; /* 继承父网格列轨道 */
}

2. 多级嵌套控制

.dashboard {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
}

.widget {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

三、高级技巧

1. 响应式子网格

@media (min-width: 800px) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .card {
        grid-template-rows: subgrid;
        grid-row: span 5;
    }
}

2. 对齐控制

.product-display {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    justify-items: stretch;
}

.product-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

四、完整案例

企业级仪表盘

<div class="dashboard">
    <div class="header">...</div>
    <div class="widget stats">
        <h3>性能指标</h3>
        <div class="chart">...</div>
        <div class="footer">...</div>
    </div>
    <!-- 更多组件 -->
</div>

.dashboard {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 240px 1fr;
}

.widget {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    grid-template-columns: subgrid;
    grid-column: span 1;
}

.stats {
    grid-column: 2;
    grid-row: 2;
}

.chart {
    grid-row: 2;
    align-self: stretch;
}

function checkSupport() {
if (!CSS.supports(‘grid-template-rows’, ‘subgrid’)) {
alert(‘您的浏览器尚未完全支持子网格，请使用Firefox 71+或Chrome 117+’);
}
}
window.onload = checkSupport;