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.
TL;DR
- Set the HTML and Body elements to 100% height via custom code and style settings.
- Ensure all parent containers of the grid (e.g., Section) have defined heights (100% or 100vh) before setting the Grid's height to 100% or 100vh.
Setting a Webflow grid to be full height requires making sure multiple parent elements are also using full height. Simply setting the grid itself to 100% height won’t work unless its parents have defined heights.
1. Check the Page Structure
- Identify the parent elements of your Grid (e.g.,
Section,Container, orBody). - If any parent container doesn't have a defined height, the grid set to 100% will have no reference height to match.
2. Set the Body and HTML to 100% Height
- Select the Body element → Go to the Style Panel → Set Height to 100%.
- Select the
htmltag (via custom code, if necessary) → Add a style in Page Settings > Custom Code > Inside<head>: <style>html, body { height: 100%; }</style>
3. Set Parent Sections to 100vh or 100%
- If your grid is inside a Section, select the Section and set:
- Height to 100vh (viewport height) or
- Height to 100%, only if its parent also has a defined height.
4. Set the Grid Height
- Select the Grid → In the Style Panel, set:
- Height to 100% (if parent is 100vh or %)
- Or 100vh directly on the grid if preferable.
5. Inspect with Dev Tools
- Use your browser’s Developer Tools to inspect the actual layout.
- Look for any parent elements collapsing or missing height definitions.
Summary
To make a Webflow grid full height, ensure all parent containers, the body, and the html elements have defined heights—either 100% or 100vh. Without this, setting the grid’s height to 100% will not work as expected.