CSS Grid 容器缩小到项目大小

Question

我正在尝试让网格容器的宽度不超过其行的宽度，即尽可能多地容纳列，然后折叠到其子项的宽度。

例如，如果网格项的总数是 16，容器的总空间量是 45px，每个网格项是 10px 宽，那么期望的结果是 4 x 4 网格宽 40px（不是 45px )。

我尝试将显示设置为 inline-grid，但这使得 auto-fill 只显示一列。

.outer {
  width: 280px; /* this varies */
  background: orange;
  resize: both;
  overflow: auto;
  height: 300px;
  padding: 10px;
}
.items {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  justify-content: end;
  column-gap: 10px;
  row-gap: 10px;
}
.item {
  height: 50px;
  width: 50px;
  background: blue;
}

<div class="outer">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

此图像中的空间不应是网格容器的一部分。

Answer 1

将其父级视为一个网格容器，您可以在其中应用相同的规则来限制网格的宽度：

.outer {
  width: 280px; /* this varies */
  background: orange;
  resize: both;
  overflow: auto;
  height: 300px;
  padding: 10px;
  /* added */
  display:grid;
  grid-template-columns: repeat(auto-fill, 50px);
  justify-content: end;
  column-gap: 10px;
  /**/
}
.items {
  grid-column:1/-1; /* take all the columns */
  background: green;
  display: grid; /* you can use "inherit" here */
  grid-template-columns: repeat(auto-fill, 50px); /* you can use "inherit" here */
  column-gap: 10px; /* you can use "inherit" here */
  row-gap: 10px;
}
.item {
  height: 50px;
  width: 50px;
  background: blue;
}

<div class="outer">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>