I notice there are two option to use such as auto-fit and auto-fill. My understanding is autofit let’s the browser handle the column sizing and wraps it as a row if there is an overflow. If so when do we need to use auto-fill if auto-fit is more ideal for responsive css grids.
Hi htran7228,
Rachel Andrew has a nice grid example site with a page that explains the differences.
auto-fill vs. auto-fit[quote=“htran7228, post:1, topic:300116”]
My understanding is autofit let’s the browser handle the column sizing and wraps it as a row if there is an overflow
[/quote]
In the event of an overflow auto-fill will wrap to a new line too.
According to the specs…
The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)
So there is the main difference between them, auto-fit collapses empty tracks and redistributes the remaining space. As seen in the Rachel’s example page.
Use auto-fit when you want it to fill remaining space. 
6 Likes
That cleared up some confusion so auto fit is if you want to fill up the remaining space. Thanks.
1 Like
You can check out some responsive grid examples here: https://demos.shieldui.com/web/grid-general/basic-usage
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.