Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?

by

Because 1fr is equivalent to minmax(auto, 1fr), by default.

When you use minmax(0, 1fr), that’s something different than standalone 1fr.

In the first case, the track cannot be smaller than the size of the grid item (min size is auto).

In the second case, the track is free to resize to a 0 width/height.

More details:

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. Equal height rows in CSS Grid Layout
  6. Position deeply nested elements in a higher level grid container
  7. Align child elements of different blocks
  8. Browser support for CSS Grid
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. How to make the items in the last row consume remaining space in CSS Grid?
  13. A grid layout with responsive squares
  14. Create a Masonry grid with flexbox (or other CSS)
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Using CSS transitions in CSS Grid Layout
  17. CSS Grid – Auto height rows, sizing to content
  18. How to make a column span full width when a second column is not there? (CSS Grid)
  19. Can I have a varying number of columns per row in a CSS grid?
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. Percentage padding / margin on grid item ignored in Firefox
  22. CSS Grid auto fit with max-content
  23. Setting different lengths for grid gaps in CSS Grid
  24. How do you collapse unused row in a CSS grid?
  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