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.

2 Likes

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.

1 Like

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.

Saying that you don’t know a use case where auto-fill would make sense it isn’t a professional answer, mostly coming from a paying product that pretends to be the topmost in the Web Development world, which of course it isn’t.

A perfect and simple use case could be when you have to render a list of items from a collection (let’s say you want to render a grid of 4 columns) but you have 2 products in your store. By using auto-fill you’ll always render the items at the right size, otherwise, you’ll end up having 2 items filling the entire grid.

1 Like

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

That is different that what you are implying and I was speaking of my own personal experience. I would also mention that I don’t work for Webflow and do not speak for them.

Thanks for sharing your use case.