Grid Auto Position Not Working

Design help Layout & Design
1

Hi, everyone.

I’m new to Webflow (and Web Design) I’m following the tutorial videos in Webflow University, and I’ve reached Layouts & design>Grid.

I’m pretty sure I’m following the instructions, (I’m trying to create a 4 row X 3 column grid with 12 images with a grid-height of 800px) I’ve named all of my elements - Section, Container, Grid & 12 X Image and each are nesting inside the correct parent element.

All of the images are in the grid fine, and everything is perfect until I reach the "To auto position each image to appear the same size, all you need to do is select an image in the grid and set the height and width to 100% and then select “cover” in Fit.

When I do that, the column heights are much longer than the 800px grid, leading to the images overflowing into the next section below.

I’d really appreciate any guidance on this.

Here is my Read Only link:

https://preview.webflow.com/preview/grid-practice-909a63?utm_medium=preview_link&utm_source=designer&utm_content=grid-practice-909a63&preview=c58ba843fa1371209c36b19206b59ebf&workflow=preview

Thanks in advance.

Tavin.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)