CSS Grid – Auto height rows, sizing to content

by

You can try minmax(min-content, max-content) ref 

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

You can also use only max-content or min-content

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: max-content; /* min-content*/
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: max-content; /* min-content*/
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}
<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

More Related Contents:

  1. Prevent content from expanding grid items
  2. Why aren’t my grid-template-areas with ASCII art not working?
  3. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. Equal height rows in CSS Grid Layout
  6. Position deeply nested elements in a higher level grid container
  7. Browser support for CSS Grid
  8. The difference between percentage and fr units
  9. Why are CSS named grid areas not in quotes?
  10. What is difference between justify-self, justify-items and justify-content in CSS grid?
  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. How can I make a div span multiple rows and columns in a grid?
  16. What is the difference between align-items vs. align-content in Grid Layout?
  17. Equal height of elements inside grid item with CSS grid layout
  18. How to make a column span full width when a second column is not there? (CSS Grid)
  19. Why does a grid-area name absent in grid-template-areas create additional tracks?
  20. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  21. Percentage padding / margin on grid item ignored in Firefox
  22. CSS Grid auto fit with max-content
  23. How do you collapse unused row in a CSS grid?
  24. Can flex items wrap in a container with dynamic height?
  25. Can I make a CSS grid with dynamic number of rows or columns?
  26. Is a button allowed to have display:grid? [duplicate]
  27. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  28. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  29. grid-area does not seem to work with the attr function, is this by design?
  30. minmax fails (invalid property value)

Leave a Comment