【发布时间】：2021-10-06 16:28:49
【问题描述】：
我有一个包含元素的display: grid div。
这些元素应自动放置为元素行，纵横比为 1 / 1，因此父元素应该是可滚动的。
假设我有 32 个项目，我希望它们显示为 4 行，每行 8 个项目。
项目的宽度被缩小以不溢出父项，但我希望它们在需要时溢出。
这是父 CSS：
display: grid;
gap: 10px;
padding: 20px;
grid-auto-flow: column;
grid-template-rows: repeat(4, 1fr);
和项目 CSS
aspect-ratio: 1 / 1;
如果我将width 或height 明确添加到孩子，效果会很好，但我希望他们自动成长。
代码笔：https://codepen.io/dbenfouzari/pen/GRmdVze?editors=1100 尝试将窗口调整为更小的宽度，以查看它不起作用。
谢谢！
【问题讨论】：
-
如果我为孩子添加明确的宽度，例如
width: 200px，它工作正常。 -
您还可以为您的 grid-template-columns 设置 minmax() 值。它至少必须能够将文本保存在图标下而不会溢出，并且可以在更宽的屏幕上增长一点：clamp() 帮助jsfiddle.net/apntLum8/2 的可能示例
-
感谢您的回复@G-Cyrillus。但是使用
minmax()假设我知道 div 里面有什么，但我不知道。我正在创建一个可以自动布局子组件的组件。在你的例子中，你颠倒了我最初想要的：你在我想要 4 行的地方创建了 8 列 -
您能分享一些代码来证明您的问题吗？通常首先设置网格，然后在单元格内调度内容。你正试图让它以另一种方式工作。并从内容中重新缩放所有内容并保持纵横比。它会很容易溢出。给我们更多细节:)
-
我的代码确实是我在问题中给出的。如果你想用 CodePen 玩：codepen.io/dbenfouzari/pen/GRmdVze?editors=1100 你可以看到它工作得很好，但是如果你调整它的大小，它就坏了。
标签： css aspect-ratio