How can I set the height of a Webflow grid to be the full height of the layout? I've already tried changing the width and height to 100%, but it's not working.
- Set all parent elements up to the Body to height: 100% and ensure proper display settings.
- Alternatively, apply height: 100vh directly to the grid for guaranteed full-height layout.
To make a Webflow grid fill the full height of the layout, simply setting the grid's height to 100% is not enough unless its parent elements also allow it. Here’s how to ensure the grid stretches to the full height of the viewport.
1. Set the Grid’s Parent to 100% Height
Select the parent element of your grid, all the way up to the Body.
For each relevant parent (e.g.,
Section,Div Block), go to the Style panel and set:Height: 100%
Display: Block or Flex (Vertical), depending on layout needs
If using a
Section, consider switching it to a Div Block and explicitly set height to ensure control.
2. Set the Grid Element to 100% Height
- Select your grid in the Designer
- Make sure the grid itself has:
- Height: 100%
- No conflicting margins or paddings pushing it out of full height
3. Set the Body & HTML to Use Full Height
- Go to the Body element:
- Set min-height: 100vh
- Alternatively, set height: 100% only if HTML is also set to 100% (Webflow’s default doesn’t force this)
4. Use VH Units as an Alternative
- Instead of relying on height: 100%, you can set the grid’s height directly to 100vh (viewport height) for guaranteed sizing.
- This bypasses the need for parent elements to also have 100% height.
5. Check for Overflow or Limiters
- Make sure no parent element has overflow: hidden unless intentional.
- Also check if any parents have fixed heights, which could restrict grid’s growth.
Summary
To make your Webflow grid fill the full height of the layout, set all parent elements up to the body with height: 100%, or directly set the grid’s height to 100vh for a simpler solution. Ensure no other styles are interfering like padding, margin, or fixed height constraints.