带有自动流的CSS网格：列-如何仅伸缩最后一列？

Question

如果我有一个自动排列列的网格

    display: grid;
    grid-auto-flow: column;

所以我不知道我的列数

我怎么说：“我希望所有列都是内容的最小大小，最后一列要填充所有可用空间？”

我知道，在简单的情况下，这是可以通过flexbox实现的，我正在尝试专门增强我的网格知识。

Answer 1

如果是关于第一列的，则可以通过将一个模板（显式网格）定义为1fr，将隐式网格定义为min-content来轻松地做到这一点>

.box {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns:1fr;
  grid-auto-columns:min-content;
  margin:5px;
}

span {
  border: 1px solid;
  padding: 5px;
}
<div class="box">
  <span>aa</span>
  <span>b</span>
  <span>ccc</span>
  <span>d</span>
  <span>eeee</span>
</div>

<div class="box">
  <span>aa</span>
  <span>b</span>
  <span>eeee</span>
</div>

对于最后一列，您可能需要更多的[[hacks

]，在这里我们考虑相同的配置，但是我们将所有元素都移到了[[before隐式网格中，以使1fr保持最后。我们需要结合使用负数和随机区域来执行此操作。 （more details about this trick here）唯一的缺点是，您需要定义所有的网格列，但是您不需要知道列数，而只需知道最大数（您可以考虑使用SASS来生成规则）

.box {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns:1fr;
  grid-auto-columns:min-content;
  margin:5px;
}

span {
  border: 1px solid;
  padding: 5px;
}

span:nth-last-child(2) { grid-column:random -1; }
span:nth-last-child(3) { grid-column:random -2; }
span:nth-last-child(4) { grid-column:random -3; }
span:nth-last-child(5) { grid-column:random -4; }
span:nth-last-child(6) { grid-column:random -5; }
span:nth-last-child(7) { grid-column:random -6; }
span:nth-last-child(8) { grid-column:random -7; }
span:nth-last-child(9) { grid-column:random -8; }
/* and so on
span:nth-last-child(n) { grid-column:random -(n-1); }
*/

<div class="box">
  <span>aa</span>
  <span>b</span>
  <span>ccc</span>
  <span>d</span>
  <span>eeee</span>
</div>

<div class="box">
  <span>aa</span>
  <span>b</span>
  <span>eeee</span>
</div>

Answer 2