CSS Grid：3x3 grid 填充父级剩余空间

Question

如何创建填充整个容器（黄色边框）的 3x3 网格？

这是我到目前为止尝试过的，但这似乎不起作用。 基本上，我想要实现的是，如果只有 6 个项目，则行应该只有 2。如果超过 6 且小于 9，则行应该是 3。

我不确定这在 CSS 网格或 CSS 中是否可行。 如果在 CSS 中无法使用，我很乐意使用 javascript。

.container {
    gap: 15px;
    display: grid;
    overflow: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(250px, 300px));
    grid-auto-rows: 1fr;
    position: relative;
    height: 100%;
}

Answer 1

如果您的行数少于 3，您可以仅使用grid-auto-rows和容器的max-height以允许其缩小。

例子

• minmax()为演示缩小比例，使用您自己的值。
• max-height至少设置为 3 行，从mimmax()值 (x3) + gap值 (x2) 中获取最大值。

 .container { gap: 15px; display: grid; overflow: auto; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(50px, 60px);/* initial values where 250px,300px */ position: relative; max-height: 950px;/* = 3 rows + 2 gaps + eventual extra padding/border */ border:solid tomato; } /* irrelevant CSS for demo purpose from here */.container { counter-reset: divs; margin:2em; background:gray; } div div { border: solid; background:white; display:flex; min-width:50px } div div:before { counter-increment: divs; content: counter(divs); margin:auto; } body {display:flex;align-items:start}

 <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>