Is there a way for a css grid item to stretch to all available columns?

Question

I'm trying to design a layout like this:

When there are 3 grid items I want them to be stacked like in the first picture. When there are 2 I want them to be stacked like in the second picture, and when there is only 1 item it should take up all available space. This should be dynamic and automatic.

I got pretty close using CSS grid, but unfortunately when it's just the purple item it doesn't work. Is there any way to achieve this? (please don't suggest flexbox or other solutions. I am aware and need this exact behavior)

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
border: 2px solid black;
margin-bottom: 10px;
  }
  
.grid div {
  background: blue;
  height: 50px;
}

   .grid > div:nth-child(1){
   grid-column: 1 / 2; /* can I change this line and have all 3 examples work? */
  background: #952662;
}  

   .grid > div:nth-child(2){
   grid-column: 2 / -1;
  background: #263195;
}  

   .grid > div:nth-child(3){
   grid-column: 1 / -1;
  background: #E49F17;
}

Works
<div class="grid"><div></div><div></div><div></div></div>

Works
<div class="grid"><div></div><div></div></div>

Doesn't work
<div class="grid"><div></div></div>

Show your css and html that fails, so the community can provide edits. SO will provide a 'Run Snippet' command so the results can be seen on this page. — Neil W, Oct 14 '22 at 12:45
For what you try with a dynamic filling of all remaining space within a row you should use Flexbox so that you can utilize `flex-grow` — tacoshy, Oct 14 '22 at 12:56
@tacoshy yes, but then I won't be able to wrap the 3rd element to the next line, right? — cubefox, Oct 14 '22 at 12:58

score 1 · Accepted Answer · answered Oct 14 '22 at 13:05

You can also select only the last child if it is standing on an odd position.

Possible example:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.grid div {
  background: blue;
  height: 50px;
}

.grid>div:nth-child(3n - 1) {
  background: #263195;
}
.grid>div:nth-child(3n) {
  background: #952662;
}

.grid>div:nth-child(3n +1) {
  background: #E49F17;
}

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

/* demo purpose */
.grid>div:nth-child(odd):last-child{display:grid;}
.grid>div:nth-child(odd):last-child:before{content:'I should be spanning the entire row';color:white;margin:auto;}

Works

<div class="grid">
  <div></div>
</div>


<div class="grid">
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

aah this is so clean I would have never thought of this, thanks!! — cubefox, Oct 14 '22 at 13:16

Is there a way for a css grid item to stretch to all available columns?

1 Answers1