如何使 CSS 网格行适应嵌套网格中的内容高度？

CSS 网格 - 根据内容调整行高：自动高度的最大内容

使用嵌套 CSS 网格时，可能会遇到外部高度的情况网格行会影响内部网格行，即使它们应该理想地调整其内容的大小。在这种情况下，实现所需行为的关键是使用 CSS 属性 grid-auto-rows。

嵌套 CSS 网格和行高传播

在提供的代码片段中，我们有两个网格容器（div 和 .grid-2）在父网格容器（grid-1）内水平排列。每个网格中的列使用 grid-template-columns 定义，行的自动放置由 grid-auto-rows 控制。

默认情况下，.grid-2 容器设置 grid-auto- rows 为 auto，这意味着行会调整以适合其内容。但是，内部网格容器 .grid-3 出现了问题。即使 grid-auto-rows 也设置为 auto，嵌套网格的行高仍会受到外部网格行的影响。这会导致 .grid-2 容器较高的一侧将其高度传播到 .grid-3 容器，从而使两个网格的行高度保持一致。

将网格行设置为“最大内容”

为了解决这个问题并将 .grid-3 容器的行调整为内容的大小，我们需要修改 grid-auto-rows 属性。 max-content 值与 grid-auto-rows 一起使用时，可确保内部网格中的每一行根据其内容调整大小，而不管外部网格中的行高度如何。

通过设置 grid -auto-rows：内部 .grid-3 容器中的 max-content，我们指示浏览器仅根据该行中的内容来计算每行的大小。这允许内部网格独立于外部网格进行调整，从而根据需要生成完美包裹其内容的行。

更新的代码片段

在下面更新的代码片段中，您可以看到对内部 .grid-3 容器中的 grid-auto-rows 的修改：

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

通过此调整，.grid-3 容器中的行将动态适应内容的高度，实现所需的大小调整行为。

以上是如何使 CSS 网格行适应嵌套网格中的内容高度？的详细内容。更多信息请关注PHP中文网其他相关文章！