Where can I find the "auto-fill" setting in Webflow's UI for CSS grid?

Webflow’s visual CSS Grid controls do not directly support the auto-fill or auto-fit keyword settings found in raw CSS, but there are alternative workflows to achieve similar layout behavior within Webflow.

1. Understand the Limitation

• Webflow's Grid editor does not expose auto-fill or auto-fit options in the UI.
• The default grid interface requires you to define a fixed number of columns and rows.
• Webflow focuses on static or manual control of grid tracks, while auto-fill and auto-fit are dynamic CSS features for responsive layouts.

2. Workarounds Within Webflow

• Use Flexbox with wrap enabled to mimic responsive behavior when you want items to auto-fill a space as screen size changes.
• Use Grid with manual column settings, then adjust the number of columns at each breakpoint.
• Use Collection Lists with Flexbox or Grid to auto-populate content dynamically, combined with media queries for responsiveness.

3. Use Custom Code for True auto-fill / auto-fit

• If you need exact use of grid-template-columns: repeat(auto-fill, minmax(...));, embed custom CSS via:
• Page Settings under Before .
• Or embed a Custom Code block inside a Webflow page.

Example inline reference (not displayed in code block for compliance):
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

• Assign a custom class to your grid container and target it with your CSS to apply the exact behavior.

4. Voting for Feature Support

• Consider submitting a feature request for extended grid control on the Webflow Wishlist, where the community can vote on new features.

Summary

Webflow does not support auto-fill or auto-fit for CSS Grid in its visual UI. To implement those behaviors, use custom code or try Flexbox with wrap as a workaround in the designer.