Remove empty space in CSS Grid

问题

I have the following layout:

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 2;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>

How could i do the exact same using a grid but the amount of space that the green top section takes up is just one line. i.e. the bottom red section should push right up to below the word "top" so that the extra empty space in the top green section is removed

回答1:

Create a grid with, let's say, 25 small rows. Something like this:

grid-template-rows: repeat(25, 10px);

Make the "top" (green) item span four rows.

.top {
    grid-row: 1 / 4;
}

Make the "bottom" (red) item span the remaining rows.

.bottom {
    grid-row: 6 / -1;
}

(Starting at row 6 to make space for the 20px row gap you had originally.)

Make the "right" (blue) item span all rows.

.right {
    grid-row: 1 / -1;
}

revised codepen

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: repeat(25, 10px);
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 6 / -1;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>
  <div class="bottom">bottom</div>
</div>

来源：https://stackoverflow.com/questions/49259136/remove-empty-space-in-css-grid

标签

html

css

css3

css-grid