CSS Grid 'responsive' column to grow or shrink on available space (no width fixed)

Question

I'm gonna have a grid that sometimes will have 1, 2, 3 or 4 columns.

Here is a example of 2 columns.

* {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

I want that in this case the ninth item span to the second column.

I can't find a property that says to the ninth item to 'just grow'

When the media query for the 3 columns kick in and change the grid-template-columns: 1fr 1fr; to grid-template-columns: 1fr 1fr 1fr; it should occupy 1fr again

And the 1fr 1fr 1fr 1fr share the same problem from the 1fr 1fr

Yep. There is no targeting the item on the last row. Nor can CSS detect when an item is the only item on that row. — Paulie_D, Apr 02 '20 at 21:45

Temani Afif · Accepted Answer · 2020-04-02T21:49:53.207

Consider last-child selector to make it span all the row when it's the only one in the row:

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

You can do the same logic when you have more than two columns.

* {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>

so, there is no generic property to do this? Will I need to do some math every time that I need to use the `grid-column:span 4` (math because I will use in sass) — Mateus Silva, Apr 02 '20 at 21:50
@MateusSilva you can use `grid-column: 1 / -1;` (check the update) but yes you need to identify the element where to apply the property, there is no generic rule that can do this for you unless you consider flexbox — Temani Afif, Apr 02 '20 at 21:53

CSS Grid 'responsive' column to grow or shrink on available space (no width fixed)

1 Answers1