How do you collapse unused row in a CSS grid?

by

Instead of this:

grid-template-rows: min-content auto

Try this:

grid-template-rows: min-content 1fr

With 1fr you’re telling the second row to consume any and all free space available in the column. Hence, when there is no content in the .first element, the .second element takes the space.

The problem with auto is that its length is relative to other grid items on the track. This means that it won’t always shrink-to-fit one particular item (like min-content is designed to do) and it won’t allow an item to disappear entirely if another item has some size (like you’re seeing in your code). 

.grid  {
  display: grid;
  grid-template-rows: min-content 1fr; /* adjustment */
  grid-template-columns: 60% 40%;
  grid-template-areas: 
    "main first"
    "main last";
}

.first { grid-area: first; background-color: orange; }
.main  { grid-area: main;  background-color: aqua; }
.last  { grid-area: last;  background-color: lightgray; }
<div class="grid">
  <b class="first">Grant me revenge!</b>
  <b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
  <b class="last">Make it quick because my horse is getting tired.</b>
</div>

<br>

<div class="grid">
  <b class="first"></b>
  <b class="main">Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.</b>
  <b class="last">Make it quick because my horse is getting tired.</b>
</div>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. Position deeply nested elements in a higher level grid container
  6. Align child elements of different blocks
  7. Browser support for CSS Grid
  8. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  9. Why are CSS named grid areas not in quotes?
  10. What is the difference between auto-fill and auto-fit?
  11. How to make the items in the last row consume remaining space in CSS Grid?
  12. A grid layout with responsive squares
  13. Create a Masonry grid with flexbox (or other CSS)
  14. Why percentage value within grid-gap create overflow in CSS grid?
  15. Using CSS transitions in CSS Grid Layout
  16. CSS Grid – Auto height rows, sizing to content
  17. How to make a column span full width when a second column is not there? (CSS Grid)
  18. Can I have a varying number of columns per row in a CSS grid?
  19. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  20. Percentage padding / margin on grid item ignored in Firefox
  21. CSS Grid auto fit with max-content
  22. Setting different lengths for grid gaps in CSS Grid
  23. Can I make a CSS grid with dynamic number of rows or columns?
  24. Is a button allowed to have display:grid? [duplicate]
  25. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  26. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  27. grid-area does not seem to work with the attr function, is this by design?
  28. minmax fails (invalid property value)
  29. How to center content and make the background cover the full column when using CSS Grid?
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment