我发现子网格的概念有点难以理解。
我确实理解我们希望根据需要使用嵌套语义标记，并让元素参与一个网格，这样我们就不必 扁平化我们的标记 仅仅是为了布局的原因。 但这在很大程度上可以通过 display: contents; 来处理。
Rachel Andrew 以一种最终让我恍然大悟的方式解释了它
我有一个跨越网格三列轨道轨道的项目，它也是一个具有三列轨道轨道的网格容器——但是这些轨道轨道与父级的轨道轨道并不对齐……
如果嵌套网格列被定义为子网格，我们将在该子元素上使用子网格值 grid-template-columns。 然后，子元素将使用它跨越的三列轨道轨道，并且其子元素将在这些轨道轨道上布局。
并不是父级消失了，而是它与父级共享网格线，以便内部元素与其他所有内容对齐自然发生。