CSS Grid auto fit with max-content

by

I had a similar question when playing around with grid:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

If we take a look at the documentation we can see that minmax command is valid:
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening;
https://drafts.csswg.org/css-grid/#funcdef-repeat

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second
argument is a track list, which is repeated that number of times.

However, there are some restrictions:

  • The repeat() notation can’t be nested.

  • Automatic repetitions (auto-fill or auto-fit) cannot be combined with
    intrinsic or flexible sizes    .

Whats an intrinsic or flexible sizes ?

  • An intrinsic sizing function (min-content, max-content, auto, fit-content()).

So the command wont work in grid because each column/row will be different sizes and wrapping cannot take place. See bellow picture as example.

minmax max-content auto-fit

This behavior should be executed using flex-box instead.

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. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  5. Aligning grid items across the entire row/column (like flex items can)
  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. Setting different lengths for grid gaps in CSS Grid
  23. How do you collapse unused row in a CSS grid?
  24. Can I make a CSS grid with dynamic number of rows or columns?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  27. grid-area does not seem to work with the attr function, is this by design?
  28. How to center content and make the background cover the full column when using CSS Grid?
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment