@eddie_thinhle

Thank you for the tip, Kevin. Auto-fit has been a life saver for me so many times because of the effectiveness with just a few lines of code ❤. It brings such a relief knowing I don't have to rely on Boostrap (and any other CSS framework) when it comes to grids  

I'm curious if the last item can somehow stretch all the way of the container's width, just like using flex 🤔.

@alexanderzin

Thank you for showing me how much more I have to learn about css

@nomadshiba

amazing! we forget or dont think about possibilities most of the times.

@kalli-tr5op

this is cool, if your customer uses up to date stuff

@e11world

This is pretty great Kevin. Maybe too much to do in one declaration but could it work with 1 at smallest size but 2 col for the rest? Not sure how I'd approach that.

@matteoc1007

Master ❤

@xilliman

I love the grid ❤

@einatblackrose

Great! Tnx for sharing

@selektahx

How would you change it, So that each column has a width according to its content. Thanks

@KelseyThornton

The uneven columns could be useful,  but the only user case I can think of offhand is if you have something like a product card that for some reason you want to split. 🤷

@swbrim

Is the auto-fit spec clear that the autofitted columns end up the same size? They are both minmax. Could a browser make them different sizes?

@NaserPapi-x7z

Awesome 🌟 
Is no need to put a comma between min-max functions?

@r-i-ch

Could you somehow make sure the bottom row takes up the rest of the available space instead of being orphaned?
auto-fit/fill are the voodoo of CSS grid. Never quite sure which would go where until ya make it work.

@gamertag8721

This is rather interesting and frustrating at the same time... i am surprised that this is actually documented

@carolmckay5152

Wow!

@renzaldwinbarnedo4779

What's a good use case for this?

@jshstuff

but the real question is how can we do odd number of columns only?

@FlyBoy1998

🎉

@immipixediter210

difference between `auto-fit` & `auto-fill`

@Sofia-ts6gy

kevin, is there a way to make horizontal tabs with <details> and no javascript? like the <summary>s all taking up a fraction of a row w/ flex or grid, but the expandable details taking up the width of the whole row, without using absolute positioning that would mess with the vertical flow of the page? 🥲

i wish i could have summary and details separate without nesting n and using “for=“ syntax like you can do with labels and inputs but it doesn’t seem to be a thing…