面试题：CSS Grid Level 2中subgrid如何应用于简单布局

Question

假设你有一个两列布局，外层容器使用CSS Grid定义，其中一个单元格里需要嵌套一个新的网格布局，且该嵌套网格要继承外层网格的轨道尺寸。请使用CSS Grid Level 2的subgrid特性实现这个布局，并说明关键代码思路。

Answer 1

HTML 结构

<div class="outer-grid">
    <div class="left-column">
        <!-- 左侧内容 -->
    </div>
    <div class="right-column">
        <div class="nested-grid">
            <div class="nested-item1">嵌套网格项1</div>
            <div class="nested-item2">嵌套网格项2</div>
        </div>
    </div>
</div>

CSS 样式

.outer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 定义外层网格列轨道 */
    grid-template-rows: auto;
    gap: 10px;
}

.left-column {
    background-color: lightblue;
}

.right-column {
    background-color: lightgreen;
    display: grid;
    grid-template-columns: subgrid; /* 继承外层网格列轨道 */
    grid-template-rows: subgrid; /* 继承外层网格行轨道 */
}

.nested-grid {
    display: grid;
    grid-template-columns: subgrid; /* 嵌套网格继承外层网格列轨道 */
    grid-template-rows: subgrid; /* 嵌套网格继承外层网格行轨道 */
    gap: 5px;
}

.nested-item1 {
    background-color: pink;
}

.nested-item2 {
    background-color: yellow;
}

关键代码思路

1. 外层网格布局：使用 display: grid 将 .outer-grid 定义为网格容器，并通过 grid-template-columns 和 grid-template-rows 设置外层网格的轨道尺寸，这里设置了两列不同比例的列轨道。
2. 右侧列中的嵌套网格：.right-column 作为嵌套网格的父元素，同样设置 display: grid，并通过 grid-template-columns: subgrid 和 grid-template-rows: subgrid 使其继承外层网格的轨道尺寸。
3. 嵌套网格自身：.nested-grid 再次设置 display: grid 以及 grid-template-columns: subgrid 和 grid-template-rows: subgrid，确保它也继承外层网格的轨道尺寸，从而实现了嵌套网格继承外层网格轨道尺寸的效果。