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?
TL;DR
- Create a two-column flex layout with a wider left column for a 3x3 image grid and a narrower right column for links/contact info.
- Use Webflow Grid in the left column for images, preserving aspect ratios with object-fit and styled divs; make layout responsive with breakpoints and column stacking on smaller screens.
To recreate a layout in Webflow with a 3x3 image grid (preserving aspect ratios) and a right-side column with links and contact info, follow these structured steps.
1. Set Up a Two-Column Layout
- Add a Section to your page in Webflow.
- Inside the section, add a Container or a Div Block with display: flex and Direction: Horizontal (Row).
- Add two child Div Blocks inside this flex container:
- Left Column (for the image grid) — give it a style like
flex-grow: 3. - Right Column (for links/info) — give it a smaller width, like 25% or
flex-grow: 1.
2. Create the 3x3 Image Grid
- Inside the Left Column, add a Div Block and set its display to Grid.
- Set the grid to 3 Columns and 3 Rows.
- For Aspect Ratio:
- Inside each grid cell, add an Image inside a Div Block.
- Set the parent Div Block to use Aspect Ratio (e.g., 1:1) using padding-top trick or set it to have Aspect Ratio: Auto (fit content) in newer browsers.
- Set the Image to cover with object-fit: cover and width/height: 100% to preserve aspect ratio behavior inside its container.
3. Add Right Column Content
- In the Right Column Div, add:
- Text Blocks or Links for navigation or external links.
- Text Elements for contact info like an email or phone.
- Use layout controls (margin, padding, typography settings) to organize and style the text for readability.
4. Make the Layout Responsive
- Set min-widths, max-widths, or use Webflow’s responsive breakpoints to adjust the layout for smaller screens.
- For mobile:
- Stack the columns using Flex Direction: Column.
- Reduce the image grid to fewer columns or switch to a single column layout.
5. Optional Enhancements
- Add hover interactions to image blocks or links.
- Use CMS Collections if your images or contact links are dynamically generated.
Summary
To recreate the layout, use a two-column flex layout where the left column holds a 3x3 grid of images (using Webflow Grid and object-fit for aspect ratios) and the right column contains text links and contact details. Use Flexbox and Grid effectively to enforce structure and responsiveness.