How can I make all the images in the grids beneath the 'Accommodation' Hero Image in Webflow the same size?

To make all grid images under the ‘Accommodation’ hero section the same size in Webflow, you'll need to define consistent sizing rules either directly on the image elements or their parent containers.

​

1. Set Uniform Image Dimensions

​

• Select an image in the grid.
• In the Style panel, set the same Width and Height values (e.g., 300px by 200px).
• Set Object Fit to Cover to ensure the image fills the area proportionally without distortion.
• Apply the same class or combo class to all similar images for consistency.

​

2. Use a Div Wrapper Around Each Image

​

• Wrap each image inside a div block.
• Give the wrapper a consistent size (e.g., Width: 100%, Height: 200px).
• Set the wrapper’s Overflow to Hidden.
• Inside the wrapper, set the image to Width: 100%, Height: 100%, and Object Fit: Cover.

​

3. Apply Consistent Grid Settings

​

• Select the grid and ensure your grid items (cells) are using consistent sizing.
• If the grid auto-fits based on content, switch to fixed row heights or control spacing with min/max settings in grid templates.

​

4. Check for Aspect Ratio Variations

​

• Ensure uploaded images are either:
• Cropped to the same ratio before uploading (e.g., 3:2)
• Or resized/positioned via Object Fit and Positioning settings in Webflow.

​

5. Apply Classes Consistently

​

• Assign the same class or combo class to all image wrappers or image elements to avoid layout inconsistencies.
• Avoid inline style overrides that might conflict.

​

Summary

​

To ensure all grid images under your 'Accommodation' section are the same size, use consistent image dimensions, wrap images in uniformly-sized divs, and apply Object Fit: Cover. Control layout further via the grid’s structure and ensure all elements share the same styling.