Make div fill up entire CSS grid's row when the other part is not available

问题

If I want to use the css-grid and make one of its child fill up the remaining width when the other child is not present on the screen, how would I do something like that?

var button = document.querySelector('.click');
var buttone = document.querySelector('.clicke')
var left = document.querySelector('.left');

button.addEventListener('click', function(e) {
  left.style.display = 'none';
})

buttone.addEventListener('click', function(e) {
  left.style.display = 'block';
})

html,
body {
  margin: 0;
}

.wrap {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: black;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right"
}

.left {
  grid-area: left;
  background-color: green;
}

.right {
  grid-area: right;
  background-color: red
}

<div class='wrap'>
  <div class='left'>
    <button class='click'>HIDE ME</button>
  </div>
  <div class='right'>
    <button class='clicke'>SHOW HIM</button>
  </div>
</div>

For example, if the green's display becomes none, I would like for the red to fill up the remaining spot in the grid. I can use other displays to achieve this effect easily, but I wanted to know if there was a method to do this while using a grid display with its areas being specifically laid out.

回答1:

At least in this case, it's enough to set

gridColumnStart: 1;

to get the desired layout. The element occupies the named area and also the first column.

I am unsure however about the posibilities to make this solution more general

var button = document.querySelector('.click');
var buttone = document.querySelector('.clicke')
var left = document.querySelector('.left');
var right = document.querySelector('.right');

button.addEventListener('click', function(e) {
  left.style.display = 'none';
  right.style.gridColumnStart = '1';
})

buttone.addEventListener('click', function(e) {
  left.style.display = 'block';
  right.style.gridColumnStart = '';
})

html,
body {
  margin: 0;
}

.wrap {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: black;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right"
}

.left {
  grid-area: left;
  background-color: green;
}

.right {
  grid-area: right;
  background-color: red
}

<div class='wrap'>
  <div class='left'>
    <button class='click'>HIDE ME</button>
  </div>
  <div class='right'>
    <button class='clicke'>SHOW HIM</button>
  </div>
</div>

回答2:

Don't define areas so that the columns can be flexible, set grid-template-columns: 1fr; with grid-auto-flow: column; and grid-auto-columns: 50%

var button = document.querySelector('.click');
var buttone = document.querySelector('.clicke')
var left = document.querySelector('.left');

button.addEventListener('click', function(e) {
  left.style.display = 'none';
})

buttone.addEventListener('click', function(e) {
  left.style.display = 'block';
})

html,
body {
  margin: 0;
}

.wrap {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: black;
  grid-template-columns: 1fr;
  grid-auto-columns: 50%;
  grid-auto-flow: column;
}

.left {
  background-color: green;
}

.right {
  background-color: red
}

<div class='wrap'>
  <div class='left'>
    <button class='click'>HIDE ME</button>
  </div>
  <div class='right'>
    <button class='clicke'>SHOW HIM</button>
  </div>
</div>

回答3:

Change .wrap display to block when grid is redundant

Although you have stated that:

I can use other displays to achieve this effect easily, but I wanted to know if there was a method to do this while using a grid display with its areas being specifically laid out.

This method keeps the display: grid layout while it's needed, but scraps it in favour of display: block when it's not.

Cheating? This isn't code golf ;-)

const hide = document.querySelector( '.hide' ),
      show = document.querySelector( '.show' ),
      wrap = document.querySelector( '.wrap' );

hide.addEventListener( 'click', function() {
  wrap.classList.add( 'hidden' );
} );

show.addEventListener('click', function() {
  wrap.classList.remove( 'hidden' );
} );

html, body {
  margin: 0;
}
.wrap {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: black;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right";
}
.wrap.hidden {
  display: block;
}
.wrap.hidden .left {
  display: none;
}
.wrap.hidden .right {
  height: 100vh;
}
.left {
  grid-area: left;
  background-color: green;
}
.right {
  grid-area: right;
  background-color: red;
}

<div class='wrap'>
  <div class='left'>
    <button class='hide'>HIDE ME</button>
  </div>
  <div class='right'>
    <button class='show'>SHOW HIM</button>
  </div>
</div>

来源：https://stackoverflow.com/questions/45270736/make-div-fill-up-entire-css-grids-row-when-the-other-part-is-not-available