Webflow sync, pageviews & more.
NEW

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.

Rate this answer

Other Webflow Questions