CSS 网格：3x3 网格填充父级的剩余空间

Question

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

这是我迄今为止尝试过的方法，但这似乎不起作用。 基本上，我想要实现的是，如果只有 6 个项目，则行应该只有 2 个。 如果多于 6 行少于 9 行，则行应为 3。

我不确定这在 CSS Grid 或 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 only 和 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>