How can I recreate a webpage layout in Webflow that includes a 3 x 3 grid of images with the original aspect ratio, along with a column on the right containing links and contact information?

To recreate a 3×3 image grid while maintaining the original aspect ratio and a right-hand column for links and contact information in Webflow, follow these steps:

1. Set Up a Two-Column Layout

• Add a Section to your Webflow page.
• Inside the section, add a Container (or use a Div Block for more flexibility).
• Within the container, add a Grid element.
• Adjust the grid to have 2 columns and 1 row, where the left column holds the image grid and the right column holds text content.
• Set the left column's width to approximately 75% and the right column to 25% (or adjust as needed).

2. Create the 3×3 Image Grid

• Nest another Grid inside the left column.
• Set the new grid to 3 columns and 3 rows.
• Add Image elements inside the grid cells.
• To maintain the original aspect ratio, change the grid children’s sizing to “Auto” (under Grid settings).
• Ensure images are set to “Fit: Cover” if they’re contained within a frame.

3. Add the Right-Side Column Content

• Inside the right column, add a Div Block.
• Insert Text Blocks and Link Blocks for navigation, contact details, or additional information.
• Use Margin or Padding to ensure proper spacing.

4. Make It Responsive

• For Tablets: Adjust grid layout if needed, such as switching to a 2x2 grid with one additional row.
• For Mobile View: Stack images in a single column and move the right contents above or below the grid.
• Use Webflow’s built-in responsiveness controls to fine-tune design for smaller screens.

Summary

• Use a main grid with two columns (images on the left, text on the right).
• Nest a 3×3 grid inside the left column for the images.
• Set images to auto-size to preserve their original aspect ratio.
• Place contact links and information in the right column using a Div Block.
• Test responsiveness to ensure a smooth experience on all devices.