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.