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.