如何使嵌套的 CSS 网格行适应其内容大小而不是继承父网格的高度？-css教程-PHP中文网

如何使嵌套的 CSS 网格行适应其内容大小而不是继承父网格的高度？

Linda Hamilton

发布： 2024-11-23 06:03:14

原创

348 人浏览过

How can I make nested CSS Grid rows adjust to their content size instead of inheriting the height of a parent grid?

CSS 网格：根据内容大小调整嵌套网格行

在提供的 HTML 和 CSS 中，您遇到了嵌套网格行的问题grid .grid-3 强制其行与嵌套网格 .grid-2 的高度对齐。要解决这个问题，您希望 .grid-3 的行调整为内容的大小，从而匹配 .grid-2 行的高度。

解决方案在于 grid-auto-rows财产。默认情况下，此属性设置为 auto，这会在行之间均匀分配空间，而不管其内容大小如何。但是，在这种情况下，我们需要根据内容进行调整的行。

要实现此目的，您需要在 .grid-3 网格上设置 grid-auto-rows: max-content 。这告诉浏览器使行的高度与内容指示的一样高，确保它们与 .grid-2 行的高度匹配。

这是更新的 CSS 片段：

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

登录后复制

通过此更改，.grid-3 中的行现在将调整大小以适应其内容，匹配 .grid-2 行的高度，同时完全保留其内容可见。

<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 网格以确保行根据其内容的大小进行调整，从而允许不同的网格彼此无缝对齐。

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