CSS grid with auto-flow: columns - how to flex grow only the last column?

问题

If I have a grid which auto-flows columns

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

So I don't know the number of columns I have

how would I say "I want all columns to be the minimum size for the contents and the last column to fill all available space"?

I'm aware that in the simple case this is achievable with flexbox, I'm trying to bolster my grid knowledge specifically.

回答1:

If it's about the first column, you can easily do it by defining one template (the explicit grid) to 1fr and the implicit grid to 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>

For the last column you may need more hacks where we consider the same configuration but we move all the elements to before the implicit grid to keep the 1fr the last. We need to use negative number combined with a random area to do this. (more details about this trick here)

The only drawback is that you need to define all the grid-column but you don't need to know the number of column, only the max number (you can probably consider SASS to generate the rules)

.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>

回答2:

Another unexpected way could be to set a hudge amount of column spanning on the last element and using only grid-auto-columns: auto leaving the grid-template-columns aside .

.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>

not so sure that it reflects your reality though.

Another alternative very similar:

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>

and let's do another one without spanning, but involving a pseudo on the last child

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>

来源：https://stackoverflow.com/questions/58476475/css-grid-with-auto-flow-columns-how-to-flex-grow-only-the-last-column

标签

css

css-grid