Dynamic grid galleries are one of those things that look simple… until you try to preserve original aspect ratios, make the layout responsive across breakpoints, and avoid manually adjusting every single image.

In this lesson, we build a fully dynamic grid gallery in Webflow using only attributes + a ready-made script, without requiring you to write any custom code.

You’ll see how to:

• Set a different number of columns for each breakpoint
• Preserve each image’s original aspect ratio — with no cropping
• Automatically calculate the correct width for every image in every row
• Use the system with CMS multi-image fields, static images, or lightboxes
• Handle incomplete rows gracefully (when the last row isn’t full)
• Add scroll-based animations and hide flicker on page load
• Use multiple dynamic galleries on the same page with different setups
  

All of this is powered by a single script already included in the project and a consistent set of attributes. Your main job is simply to structure the gallery list correctly and apply the right attributes to the gallery wrapper and items.

Understanding the problem and the goal

We start with a list of images — some horizontal, some vertical — and the goal is to distribute them into rows and columns while always keeping their original aspect ratios.

Our goal:

• Define how many columns we want per breakpoint
• Make all images keep their natural proportions
• Ensure each row distributes space based on the relative aspect ratios
• Avoid using object-fit: cover and avoid cropping
• Support CMS-driven image galleries and static image lists
• Allow lightbox functionality inside the dynamic grid
  

The core logic lives inside a script, but configuration happens entirely through attributes.

The gallery wrapper and core attributes

The main structure relies on the Collection List Wrapper (or any wrapper if using static images).

Key settings:

• display: flex
• flex-direction: row
• A custom gap of your choice (e.g., 0.5rem)
  

The important part is the attribute:

• fc-gallery="list"
  

This tells the script: “this is one dynamic gallery instance”.

We then define how many columns the gallery should have using attributes like:

• columns-desktop="3"
• columns-tablet="3"
• columns-landscape="2"
• columns-portrait="1"
  

If you omit them, the default number of columns is 2 for every breakpoint.

Each value cascades down to smaller breakpoints unless overridden.

The gallery items and dynamic width calculation

Each gallery item (Collection Item or static wrapper) needs:

• fc-gallery="item"
  

Inside the Designer we temporarily set the item’s width to ~40–45%.

This is only to prevent Webflow from treating the image as “small” and generating pixelated versions on the live site.

On publish, the script:

1. Reads the aspect ratio of each image
2. Computes the sum of ratios for each row
3. Calculates a “proportion coefficient” per item
4. Assigns a dynamic width that perfectly fits the row
   

This ensures a balanced layout where all images remain proportionate.

Images and optional lightboxes

Inside each gallery item you can place:

• A simple image
• A lightbox (with a link to the CMS multi-image field)
• Any static image you upload manually
  

Important settings:

• Image display: block
• Lightbox display: block
  

This guarantees that the element fills the entire dynamic width assigned by the script.

Handling incomplete rows

If the last row doesn’t have enough images to fill the expected number of columns (e.g. 25 images with a 3-column setup):

The script “pretends” there are missing images by:

• Replicating the aspect ratio of the last item, or
• Computing an average ratio (when there are 2 items)
  

This ensures the final row still looks visually balanced.

Multiple dynamic galleries on the same page

You can have as many galleries as you want.

Steps:

1. Duplicate the gallery wrapper
2. Keep fc-gallery="list" on each instance
3. Define different column settings per instance
4. Add different images or CMS lists
   

The script automatically detects and handles each gallery separately.

Using the solution with static images (no CMS)

The structure is identical:

• A wrapper with fc-gallery="list"
• Items with fc-gallery="item"
• Images inside each item
  

Animations, breakpoints, and dynamic resizing all work exactly the same.

Adding animations and hiding flicker

Because the script waits for images to load before making calculations, you might see a slight flicker.

To hide it:

• Add a Page Load animation setting the gallery opacity from 0 → 100%
• Add a Scroll Into View animation to each gallery item (slide + fade)
  

This creates a cleaner loading experience and a more polished design.

Recap

By the end of the lesson you’ll have a dynamic grid gallery that:

• Adapts column count per breakpoint
• Preserves aspect ratios automatically
• Requires zero manual resizing or cropping
• Works with CMS or static images
• Supports lightboxes
• Handles incomplete rows elegantly
• Can be duplicated across the project with minimal setup
  

All without modifying the code — just attributes and a ready-to-use script.