How is “grid-template-rows: auto auto 1fr auto” interpreted?

by

As a thumb rule,

  • fr is greedy,
  • auto is shy.

When the browser renders your grid, first it calculates the necessary sizes of auto elements – they all get the minimum they can live with -, and then, after all other sizes are known, will it distribute the remaining space among fr cells. Distribution works the obvious way: sum the numbers, slice the pie, give everyone the amount requested. Like, you have 1fr, 1fr, 3fr and 2fr in the definitions – the numbers add up to 7, therefore the remaining space will be cut to 7 equal slices, and then everyone gets their share.

Splitting horizontal space

Remember this one and grids will be your best friends:

  • 1fr 1fr 1fr ——–> 3 equal columns,
  • auto auto auto —-> 3 adaptive-width columns

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Equal height rows in CSS Grid Layout
  4. How to make the items in the last row consume remaining space in CSS Grid?
  5. How can I make a div span multiple rows and columns in a grid?
  6. Why aren’t my grid-template-areas with ASCII art not working?
  7. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  8. Aligning grid items across the entire row/column (like flex items can)
  9. Browser support for CSS Grid
  10. The difference between percentage and fr units
  11. Why are CSS named grid areas not in quotes?
  12. Left aligned last row in centered grid of elements
  13. What is difference between justify-self, justify-items and justify-content in CSS grid?
  14. A grid layout with responsive squares
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Change the order of col-*-12 columns in Bootstrap using push/pull
  17. What is the difference between align-items vs. align-content in Grid Layout?
  18. Equal height of elements inside grid item with CSS grid layout
  19. How to make a column span full width when a second column is not there? (CSS Grid)
  20. Why does a grid-area name absent in grid-template-areas create additional tracks?
  21. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  22. CSS Grid auto fit with max-content
  23. Can flex items wrap in a container with dynamic height?
  24. Can I make a CSS grid with dynamic number of rows or columns?
  25. How to make a fixed column in CSS using CSS Grid Layout?
  26. Is a button allowed to have display:grid? [duplicate]
  27. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  28. minmax fails (invalid property value)
  29. Bootstrap Grid System new line does not look nice
  30. Getting columns to wrap in CSS Grid

Leave a Comment