具有自动流的CSS网格：列-如何仅伸缩最后一列？ [英] CSS grid with auto-flow: columns - how to flex grow only the last column?

问题描述

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

  display：grid; 
 grid-auto-flow：列; 
  

所以我不知道的列数

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

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

解决方案

另一种意外的方法可能是在最后一个元素上设置一定数量的列跨度，并且仅使用 grid-auto-columns：auto 离开网格-template-columns放在一边。

  .box {display：grid; grid-auto-flow：列； / * grid-auto-columns：自动;这里没用* /边距：5像素；}跨度{边框：1像素实线；填充：5px； margin：1px} span：last-child {grid-column：span 100;背景：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>让我这么多< / span> < span> b< / span> < span> aa< / span> < span> b< / span> < span> aa< / span> < span> b< / span> < span> eeee< / span>< / div>  

另一种非常相似的替代方法：

  span {border：solid;填充：1em；边距：1px； min-width：min-content;}。box {display：grid; grid-auto-flow：列；} span：最后一个孩子，b {颜色：番茄；网格列：跨度70；宽度：自动；}  

 < div class = box > < span> aa< / span> < span> bbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbb bbbbbbbb bbbbbbbbb< / span> < span< b>也要以整页模式进行测试。 < span> desd< / span> < span> /< / span> < / div>  

但在最后一个孩子上涉及到伪类

  span {边框：实心；填充：1em； margin：1px;}。box {display：grid; grid-auto-flow：列；} span：最后一个孩子{颜色：番茄； / *技巧开始* /溢出：隐藏；} span：last-child：after {content：;显示：块；宽度：100vw;} / *技巧性结束* /  

 < ; 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>最后一个孩子< / span>< / div>  

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.

解决方案

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>

这篇关于具有自动流的CSS网格：列-如何仅伸缩最后一列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！