具有自动流的 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，我们考虑相同的配置，但我们将所有元素移动到之前隐式网格以保持1fr最后的。我们需要使用负数结合随机区域来做到这一点。 (more details about this trick here)

唯一的缺点是你需要定义所有的grid-column但你不需要知道列数，只知道最大数（你可能可以考虑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

另一种意想不到的方法是在最后一个元素上设置大量的列，并且只使用 grid-auto-columns: auto 将 grid-template-columns 放在一边。

.box {
  display: grid;
  grid-auto-flow: column;
  /* grid-auto-columns: auto; useless here */
  margin: 5px;
}

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

span:last-child {
  grid-column: span 100;
  background: tomato
}

<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>
<div class="box">
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>break me with so many</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>aa</span>
  <span>b</span>
  <span>eeee</span>
</div>

虽然不太确定它是否反映了你的现实。

另一个非常相似的替代方案：

span {
  border: solid;
  padding: 1em;
  margin: 1px;
  min-width: min-content;
}
.box {
  display: grid;
  grid-auto-flow: column;
}
span:last-child,b {
  color: tomato;
  grid-column: span 70;
  width: auto;
}

<div class="box">
  <span>aa</span>  <span>bbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbb bbbbbbbb bbbbbbbbb</span>
  <span><b>To be tested in fullpage mode too.</b></span>
  <span>desd</span>
  <span>/</span>  
</div>

让我们再做一个不跨越的，但在最后一个孩子上涉及一个伪

span {
  border: solid;
  padding: 1em;
  margin: 1px;
}

.box {
  display: grid;
  grid-auto-flow: column;
}

span:last-child {
  color: tomato;
  /* trick start */
  overflow: hidden;
}

span:last-child:after {
  content: "";
  display: block;
  width: 100vw;
}
/* trick end */

<div class="box">
  <span>aa</span> <span>bbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbb bbbbbbbb bbbbbbbbb</span>
  <span>cccc ccc ccccccc ccc cccccc cccccccccc</span>
  <span>desd</span>
  <span>last child</span>
</div>