CSS Grid Display allows defining number of grid columns based on child width

Posted . Visible to the public.

An element with display: grid can define its grid-template-columns based on (preferred) child width using the repeat function with auto-fill or auto-fit, like so:

grid-template-columns: repeat(auto-fit, 100px)

auto-fill and auto-fit behave differently if you use rules with dynamic sizing, like minmax(100px, 1fr). Simply put, auto-fill will create as many columns as possible, including empty ones, while auto-fit hides empty columns.

See the linked page for more details.

Arne Hartherz
Last edit
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2021-12-14 16:04)