What could be causing the issue in Webflow with not being able to use the auto-fit grid despite deleting all FR, VH, or % values?
TL;DR
- Remove fixed width/height or min/max constraints from all grid children to enable flexible sizing.
- Ensure the grid uses
repeat(auto-fit, minmax(...))via custom code, as Webflow’s UI may not fully support it. - Reset column settings to auto and check for retained hidden units in grid settings.
- Avoid nesting grids in constrained containers and verify layout behavior in Preview or live publish.
The issue with Webflow's auto-fit grid not working even after removing FR, VH, or % values may stem from other hidden or invalid constraints.
1. Check for Min/Max Width or Height on Grid Children
- Auto-fit requires child elements to have valid, flexible sizing, especially when using
minmax()functions. - If any grid item or cell has a fixed width or min/max constraint, it may break the auto-fit behavior.
- Inspect each child element in the grid and remove any fixed dimensions, especially min-width, max-width, width, min-height, and max-height.
2. Confirm Grid Column Definition Uses auto-fit
- Webflow’s visual grid editor doesn’t currently expose the full ability to define
repeat(auto-fit, minmax(...))directly. - In most cases, this behavior must be simulated using custom code or manually adjusting columns in a way that mimics responsiveness.
3. Double-Check for Hidden Units
- Even if you’ve deleted
fr,%, orvhunits visually, Webflow may retain a ghost value. - Try switching to custom code view or re-selecting the grid area and resetting column settings to auto.
4. Avoid Nesting Grids with Constraints
- If you’re placing a grid inside another grid or a flex container with restricted dimensions, it may limit auto-fit responsiveness.
- Make sure the parent container allows for full width expansion, ideally set to
autoor100%withoutmax-widthconstraints.
5. Check for Custom Code Conflicts
- If you’ve used custom CSS to apply grid definitions manually, ensure that
auto-fitis used correctly in arepeat()function like:
repeat(auto-fit, minmax(150px, 1fr))
- Incorrect syntax or applying it without
minmax()will prevent it from functioning.
6. Preview vs. Designer Inconsistencies
- Sometimes, auto-fit layouts may not behave as expected in Designer view.
- Always verify behavior in Preview mode or live publish, as dynamic resizing isn’t fully rendered within the Designer panel.
Summary
To fix auto-fit not working in Webflow, ensure no grid children have fixed sizing constraints, the parent container allows flexible width, and "ghost" units or broken column settings are cleared. Webflow may not natively support full auto-fit functionality, so checking in Preview and using custom code may be necessary.