`auto-fit` in combination with `min-content`

Heyy, I have a new question. I was just experimenting with auto-fit when I ran into this issue. It says that the grid-template-columns value is invalid: https://jsfiddle.net/KonerDev/c54gxq83/1/ If I replace the auto-fit with e.g., 4, it works, but then I loose the auto-wrapping behavior. What's wrong here?
Create a grid layout with multiple items - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
1 Reply
Kevin Powell
Kevin Powell•2mo ago
min-content isn't a valid value for the minmax(). The reason for that is, with repeat(), all the columns have to be the same size, but min-content depends on the min-content size of the content of each column. And it would complicate even more when it does wrap, because what if the new content that was in column 4 now wraps to column 1, and forces that column to be wider, which means none of them are wrapping anymore... So yeah, it needs a fixed value 🙂

Did you find this page helpful?