CSS Grid“响应”列在可用空间上增长或缩小（没有固定宽度）[重复]

Question

我将有一个有时会有 1、2、3 或 4 列的网格。

这里是 2 列的示例。

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;

}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 50px 100px;
}

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
    <div>Nine</div>
</div>

https://codepen.io/alfaex/pen/QWbPRxw

在这种情况下，我希望第九项跨越到第二列。

我找不到对第九个项目说“只是增长”的属性

当 3 列的媒体查询启动并更改 grid-template-columns: 1fr 1fr; 到 grid-template-columns: 1fr 1fr 1fr; 它应该再次占据 1fr

和1fr 1fr 1fr 1fr 共享与1fr 1fr 相同的问题

Answer 1

考虑 last-child 选择器，当它是行中唯一的一个时，使其跨越所有行：

.wrapper :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

当您有两个以上的列时，您可以执行相同的逻辑。

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;

}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}


.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.wrapper.four :last-child:nth-child(4n + 1),
.wrapper.two :last-child:nth-child(odd){
  grid-column:1/-1;
}

<div class="wrapper two">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
    <div>Nine</div>
</div>

<div class="wrapper three">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
    <div>Nine</div>
</div>

<div class="wrapper four">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
    <div>Nine</div>
</div>