为什么css网格中的子容器在水平方向上占100%，而在垂直方向上只占90%？

CSS网格中的子容器在水平方向上占100%，而在垂直方向上只占90%的原因是因为网格容器的默认行为是将剩余的空间分配给子容器，但是在垂直方向上存在一些特殊情况。

在CSS网格布局中，网格容器可以被分为行和列，每个单元格可以包含一个或多个子容器。当子容器没有指定具体的高度时，网格容器会根据子容器的内容自动调整高度。

在水平方向上，子容器默认会占满整个网格单元格的宽度，因为网格容器会自动将剩余的空间平均分配给子容器。这意味着子容器的宽度会自动扩展以填充整个单元格。

然而，在垂直方向上，子容器默认不会占满整个网格单元格的高度。这是因为在垂直方向上，网格容器会根据子容器的内容自动调整高度，但是会保留一部分空间作为网格行的间距。这个间距的大小通常由网格容器的属性和样式决定。

如果希望子容器在垂直方向上也占满整个网格单元格的高度，可以通过设置子容器的样式属性来实现。例如，可以使用height: 100%来指定子容器的高度为100%，这样子容器就会占满整个网格单元格的高度。

总结起来，CSS网格中的子容器在水平方向上占100%，而在垂直方向上只占90%是因为网格容器的默认行为是将剩余的空间分配给子容器，并且在垂直方向上会保留一部分空间作为网格行的间距。如果需要子容器在垂直方向上也占满整个网格单元格的高度，可以通过设置子容器的样式属性来实现。