• Creates an automatically responsive grid
• Does not work when children need to span over multiple columns
• Column Count Variable sets the max number of columns the grid can be
• Gap set to Gap/Size Variable Mode (Gap must be set with a variable mode to correctly calculate the responsiveness)
• Set the min column width under custom properties (8rem by default). The columns will wrap before getting smaller than this size.
• When there’s only a single item in the list, autofit will stretch the item to be full width of the parent. Autofill will create empty spaces in the grid instead of making the item stretch (ideal for cms lists that will be filtered).

• Autofit and autofill can also be used with the grid component
• The Column Count variant sets the max column count.
• The --column-width variable sets the min column width (18rem by default)
• The --type variable allows for switching between auto-fit and auto-fill
• The class attribute allows us to override the default gap with gap utilities