如何在嵌套 CSS 网格中实现行自动高度？

Mary-Kate Olsen

发布： 2024-11-23 10:20:10

原创

479 人浏览过

How to Achieve Auto-Height Rows in Nested CSS Grids?

CSS 网格布局：基于内容调整大小的自动高度行

在此场景中，您有一个包含两个嵌套网格的网格设计。虽然左侧嵌套网格的行为符合预期，但右侧嵌套网格中的行高度设置为与左侧网格中的行高度匹配。

将 grid-auto-rows 属性设置为 max-右侧嵌套网格中的内容将允许其行调整到内容的高度，解决问题并确保两个嵌套网格的行数相等height:

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

登录后复制

通过此修改，右侧嵌套网格中的行将自动缩放以适合其内容，从而保持两个网格之间所需的视觉平衡。

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

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章