CSS Grid 中如何设置网格的最大高度
CSS Grid 是一个强大的布局方法，它可以快速的创建复杂的网格布局。当我们使用 CSS Grid 布局时，我们需要知道如何设置网格的最大高度，以确保网格在布局中不会超出规定的高度范围。
1.使用网格容器的 max-height 属性
当我们需要控制整个网格布局的高度时，可以使用网格容器的 max-height 属性。该属性可以设置网格容器的最大高度。
示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
max-height: 500px; /*设置最大高度为 500px*/
}上面的示例代码中，我们设置了一个包含 3 列和 5 行的网格布局，并为容器设置了最大高度为 500px。这意味着如果网格布局在渲染时超出 500px 高度范围，它将出现滚动条。
2.使用网格子项的 max-height 属性
如果我们需要控制网格子项的高度，可以使用子项的 max-height 属性。该属性可以设置网格子项的最大高度。
示例代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ---------- - ----------- ------ --------- ------- -
在上面的示例代码中，我们设置了 max-height 属性为 100px 的网格子项，这将限制子项的高度在 100px 以内。
结论
CSS Grid 布局中，通过设置网格容器和网格子项的 max-height 属性，可以快速地控制整个网格布局或单个网格子项的高度。这使得我们可以轻松地实现复杂的网格布局，并确保布局不会超出规定的高度范围。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67107f6a5f551281026b97ad