How can I make grid-item take the whole line?

Question

I'm learning grid-system and wondering how I can make some grid-item take remaining cells?

I have this 3 states:

1. Desktop
2. Mobile
3. Mobile without green one

I just set for the desktop:

grid-template-columns: repeat(3, 1fr)

Works fine. For the mobile, I reset the above code and do for the first element

grid-column: 1 / span 2

And receive what in the second option But when it comes to the optional appearance of the green block, I get something like this:

So not the third option

The blue block takes only the half.
And I tried lots of grid things but didn't get the result I wanted.
With flexbox I could easily just use flex-basis and flex-grow properties, but with grid I'm doomed to pass some extra class, for example, block__elem--without-green and set grid-column: 1/span2 by the blue block

Answer 1

This snippet takes advantage of the CSS grid-template-areas property.

The three divs are set to be in grid areas A, B, C respectively.

Their container has different layout depending on whether option 1, 2 or 3.

For the third layout the second div is just not displayed.

.container {
  width: 100vmin;
  height: 30vmin;
  display: grid;
}

.container.one {
  grid-template-areas: 'A B C' 'A B C';
}

.container.two {
  grid-template-areas: 'A A' 'B C';
}

.container.three {
  grid-template-areas: 'A' 'C';
}

.container :nth-child(1) {
  border: red solid 1px;
  grid-area: A;
}

.container :nth-child(2) {
  border: green solid 1px;
  grid-area: B;
}

.container :nth-child(3) {
  border: blue solid 1px;
  grid-area: C;
}

.container.three :nth-child(2) {
  display: none;
}

<h2>ONE</h2>
<div class="container one">
  <div></div>
  <div></div>
  <div></div>
</div>
<h2>TWO</h2>
<div class="container two">
  <div></div>
  <div></div>
  <div></div>
</div>
<h2>THREE</h2>
<div class="container three">
  <div></div>
  <div></div>
  <div></div>
</div>