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.

To set the height of a Webflow grid to be the full height of the layout, you need to ensure that all of its parent elements have a defined height as well. Here's how you can achieve this:

1. Set the height of the HTML and Body elements: By default, these elements have a height of auto, which only expands to accommodate the content. To make the grid span the full height of the layout, you'll need to set the height of both the HTML and Body elements to 100%.

In Webflow, you can do this by selecting the Body tag in the Navigator panel and adjusting the height property in the Style panel to 100%. Then, select the HTML tag (located at the root level of the Navigator) and set its height to 100% as well.

2. Ensure all parent elements have a defined height: Continue checking the height settings of all parent elements of the grid. Each parent element must have a defined height (e.g., a specific pixel value or a percentage) for the grid to inherit its height.

If any parent element has a height set to auto or has no height specified, the grid won't be able to expand to fill the full height of the layout. Adjust the height of these parent elements accordingly until you reach the top-level container.

3. Set the grid height to 100%: Once all parent elements have a defined height, navigate to the grid element itself and set its height to 100%. This tells the grid to take up the entire height of its parent container.

If the grid element is nested within another element (e.g., a Div Block), ensure that the parent element also has a height set to 100% if you want the grid to fill the parent's height.

Following these steps should allow you to set the height of your Webflow grid to be the full height of the layout. Remember to preview and test your layout across different devices and screen sizes to ensure it behaves as expected.