如何使嵌套的 CSS 网格行自动调整其高度以匹配内容？-css教程-PHP中文网

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

DDD

发布： 2024-11-24 20:05:13

原创

977 人浏览过

How can I make nested CSS Grid rows automatically adjust their height to match content?

CSS 网格：自动调整行高，根据内容调整大小

使用嵌套 CSS 网格时，可以在两个网格之间实现一致的行高度一个挑战。在这种情况下，右侧嵌套网格中的行被迫与左侧嵌套网格中的行高度匹配，从而导致间距不均匀。

要纠正此问题，您可以使用 grid-auto- rows：右侧嵌套网格的 max-content 属性。此属性将每行的高度设置为其最高子元素的高度。因此，行将动态调整以适应内容，使高度与左侧嵌套网格中的高度对齐。

示例：

.grid-3 {
  grid-auto-rows: max-content;
}

登录后复制

此修改确保右侧嵌套网格中每一行的大小适合其内容，从而在两个网格之间创建一致的高度。这是更新的代码片段：

.grid-2 {
  grid-auto-rows: max-content;
}

.grid-3 {
  grid-auto-rows: max-content;
}

登录后复制

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

登录后复制

现在，左右嵌套网格中的行将自动调整其高度，从而创建视觉上一致的结果。

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