How to make CSS Grid items take up remaining space?

by

Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you’re after :).

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Jens edits: For better browser support this can be used instead: grid-template-rows: 1fr auto;, at least in this exact case.

More Related Contents:

  1. Grid properties not working on elements inside grid container
  2. Equal width columns in CSS Grid
  3. Items that span all columns/rows using CSS grid layout
  4. CSS-only masonry layout
  5. Center and bottom-align flex items
  6. Last margin / padding collapsing in flexbox / grid layout
  7. Make grid container fill columns not rows
  8. CSS Grid Layout not working in IE11 even with prefixes
  9. Equal width flex items even after they wrap
  10. How to center elements on the last row in CSS Grid?
  11. How to target a specific column or row in CSS Grid Layout?
  12. minmax() defaulting to max
  13. Preventing double borders in CSS Grid
  14. Why is my Grid element’s height not being calculated correctly?
  15. Bootstrap 4 row fill remaining height
  16. Why display grid with 100% in grid-template-columns goes out of body?
  17. CSS grid – maximum number of columns without media queries
  18. Make row stretch across all columns in CSS Grid
  19. Make flex items overlap
  20. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  21. Understanding grid negative values
  22. grid-auto-flow in snake lines?
  23. How can I target a specific column or row in a CSS grid layout?
  24. sticky position on css grid items
  25. How to flatten nested divs to display them in a CSS grid?
  26. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  27. What are the default values for justify-content & align content?
  28. How to make a fixed column in CSS using CSS Grid Layout?
  29. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  30. How to calc() the number of rows in a grid template?

Leave a Comment