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.

If your Webflow grid isn't stretching to the full height of the layout, it's likely due to missing height settings on its parent elements. Setting a grid to height: 100% only works if all parent containers also have defined heights.

​

1. Set the Body and Parent Elements to 100% Height

​

• Select the Body element and set its height to 100% in the Style panel.
• Then, go up the hierarchy and set height: 100% on the html tag (requires a small embed or page setting) and any wrappers (e.g., a Div Block or Section) that contain your grid.

​

2. Use VH Instead of Percentage for Height

​

• Instead of using height: 100%, try setting the grid's height to 100vh (viewport height), which forces the grid to match the full height of the browser window regardless of parent settings.

​

3. Check That the Grid’s Parent Isn’t Collapsing

​

• If the parent of the grid has no content or defined height, it will collapse, and 100% height won’t have any reference.
• Add a height to the parent or use flex layout (Display: Flex, Direction: Column, Height: 100vh) to stretch children.

​

4. Use Flexbox for Vertical Stretching (Optional)

​

• Wrap your grid in a Flex container set to Vertical with Align: Stretch.
• Set Height: 100vh on the Flex container, which will allow the child Grid to stretch vertically as needed.

​

Summary

​

To make a Webflow grid fill the full height of the layout, ensure all parent elements—including Body and wrappers—have their height set to 100% or 100vh. Alternatively, apply 100vh directly to your grid or use a flex wrapper for vertical stretching.