CSS 网格：自动调整行大小以适合内容
使用嵌套 CSS 网格时，可能会遇到行高的问题右侧嵌套网格的高度受到左侧网格的影响，导致高度不匹配。要解决此问题并使右侧行调整为内容大小，我们可以利用 grid-auto-rows: max-content 属性。
在提供的代码片段中，右侧嵌套网格的 grid- auto-rows：auto 设置根据行内内容自动计算行高。但由于左侧网格有多行，右侧网格的高度也会受到影响，导致行高不均匀。
通过修改右侧嵌套网格的 grid-auto-rows 属性为 grid-auto-rows ：max-content，我们强制将行高设置为每行中最大元素的高度。这可以确保右侧嵌套网格的行与左侧网格的行高度匹配，无论内容的大小如何。
下面是更新后的代码：
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: max-content;
}通过此修改，右侧嵌套网格的行将自动调整为内容大小，确保两个网格的行高度相等。
以上是如何使嵌套 CSS 网格行自动调整大小以匹配内容高度？的详细内容。更多信息请关注PHP中文网其他相关文章！
