CSS Grid Course: auto-fit vs auto-fill

Key Takeaways

heyy in this screencast I'm going to explain the difference between autofit and autofit so here we have two different grids using one or the other you can see them on the page here and I'm assuming that you understand the basics of this complicated expression here we're basically repeating with autofit as many columns as we can fit into the grid given these constraints here they should be minimum 100 pixels and maximum one fraction unit and that as you probably remember from the screencast in the second section will give a nice responsive behavior where the amount of columns grows with the size of the grid like this if we large in this page boom there the grid crossed the 300 pixel threshold meaning it could fit three columns in instead of two now as we make it more wide the columns become one fraction unit until it reaches the next threshold which is 400 pixels and boom then autofit and autofit adds another column to the grid since we now can fit 400 pixel columns into the grid however there's a slight difference between the two and that'll be apparent if we try to enlarge into grid even more like this now what you'd see in that autofill actually added fifth column even though we don't have a fifth element to add there where's auto fit made sure that the four items we have actually fit the grid now under the hood what's happening here is actually that both of them add new column tracks though auto fit actually collapses those new columns to see row pixels in width so that the current items you have in the grid when defined like this with a maximum size of one fraction unit actually will fit to the grid regardless where it's autofill at every 100 threshold like there and there and there it'll add new column tracks which basically are empty so that was the difference between autofit and autofit