如何使嵌套 CSS 网格行自动调整大小以匹配内容高度？

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中文网其他相关文章！