1

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67

1 Answers1

2

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • If the top and bottom sections actually have dynamic heights, then please post more details. You'll probably need to work with `auto` and `fr`, instead of fixed, units. – Michael Benjamin Mar 13 '18 at 15:01
  • 1
    Like this essentially https://codepen.io/Paulie-D/pen/aYddbJ ... is `min-content` preferred to `auto`? – Paulie_D Mar 13 '18 at 15:22
  • That actually works well Paulie_D. What if the Top div then has no content, could it be automatically removed/bottom moved up to the top? – strangeQuirks Mar 13 '18 at 15:28
  • Consider posting another question with a more complete example. My answer provides a basic solution to a basic question. If you're dealing with dynamic heights or removable grid items, add those details next time around. – Michael Benjamin Mar 13 '18 at 15:46
  • Good idea, have done that here with what iv tried so far: https://stackoverflow.com/questions/49261024/css-grid-with-dynamic-heights-for-columns-and-growing-rows-not-fully-working – strangeQuirks Mar 13 '18 at 16:19