一、技术优势

Subgrid技术使复杂布局代码量减少70%，对齐精度达到像素级

二、核心实现

/* 卡片网格布局 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-row: span 3; /* 定义卡片占3行 */
    grid-template-rows: subgrid; /* 继承父网格 */
}

/* 标题与底部对齐 */
.card-header, .card-footer {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2; /* 跨越两列 */
}

/* 表单布局系统 */
.form-container {
    display: grid;
    grid-template-columns: [label] auto [input] 1fr;
    gap: 1rem 2rem;
}

.form-row {
    display: grid;
    grid-column: 1 / -1; /* 跨越全部列 */
    grid-template-columns: subgrid; /* 继承列轨道 */
    
    /* 同时控制行 */
    grid-template-rows: subgrid;
    grid-row: span 2;
}

/* 错误消息对齐 */
.error-message {
    grid-column: input; /* 对齐输入框 */
}

三、高级特性

/* 移动端适配 */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .card {
        grid-template-rows: subgrid;
        grid-row: span 2; /* 减少行数 */
    }
}

/* 横屏优化 */
@media (orientation: landscape) {
    .form-container {
        grid-template-columns: [label] 1fr [input] 2fr;
    }
}

/* 多层嵌套布局 */
.dashboard {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
}

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

.widget-content {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
}

/* 确保所有层级对齐 */
.widget-header, .widget-footer {
    grid-column: 1 / -1;
}

四、完整案例

<!-- 仪表盘布局完整代码 -->
<div class="dashboard">
    <header class="header">
        <div>Logo</div>
        <nav style="display:grid;grid-template-columns:subgrid">
            <a href="#" rel="external nofollow"  rel="external nofollow" >首页</a>
            <a href="#" rel="external nofollow"  rel="external nofollow"  style="justify-self:end">登录</a>
        </nav>
    </header>
    
    <aside class="sidebar">
        <div>导航菜单</div>
        <div style="align-self:end">版权信息</div>
    </aside>
    
    <main class="content">主内容区</main>
</div>

<style>
.dashboard {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
}
.header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}
.sidebar {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}
</style>