Streaming live at 10am (PST)

Where is CSS Grid's "Auto-Fill" functionality?

I can’t find the “auto-fill” setting anywhere in Webflow’s UI for css grid. This is a basic feature of the CSS grid spec, and I imagine it would be right next to the “auto-fit” checkbox.

Am I missing something or is this still not implemented?

There is no such property. If you review the link below you can come back and update your post.

The default in Webflow is grid-auto-columns: 1fr; and grid-template-rows: auto auto;

Auto-fill is a rather well known feature of CSS grid. There is hardly a tutorial that doesn’t include it. It allows for columns to automatically size themselves to fit within the grid.

You can find the Mozilla spec here: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

Auto-fill dramatically changes how CSS grid can be used, and to not have it available is frustrating given that the auto-fit setting already exists.

The “auto-fit” is a value of the repeat() function used in grid-template-columns/rows and it is supported in Webflow. I was just focused on a property, not a value of a function and look at that function as auto placement. Chalk it up to late nights. Note: Auto-fit can’t be enabled when there are auto, flexible (FR), minmax(auto,auto), or other auto-fit columns or rows.

Here is a video on how to set it on a column.
https://share.getcloudapp.com/o0um7vz4

I know auto-fit can be enabled, but what about auto-fill? I am working on a project and would like to use auto-fill to make the css grid more responsive.

Since the interface does not provide it, you can implement it manually by recreating the rule with CSS. Webflow does not support every CSS grid feature in the spec.

How can I bring this to the attention of the dev team? It’s a basic feature of CSS grid, and the code structure already exists in the form of the auto-fit checkbox.

Webflow provides a “Wishlist” for suggestions. But many more important ones to the community have languished for long periods. You can create an entry. I just would not get your hopes up.

For anyone who wants to know the difference between auto-fit (provided) and auto-fill in the repeat function should read this article.

TLDR;

I have yet to think of a use case where auto-fill would make more sense than auto-fit.