Topic: query loop equal heights when one item is set to span multiple columns

Drew McManus
April 6, 2026 at 1:30 pm

I followed David’s recommendations at https://generate.support/topic/querryloop-two-columns-except-the-first-one-with-gb/ on setting up a multi-column item in a query loop (thanks!) but can’t seem to get the last column in that grid to render at full height regardless what I try. I assumed the solution would be setting the container to flex, column, stretch then set the images to min 100% height but that did not work.

You can see what I mean at https://stg-morikami-staging.kinsta.cloud/private-event where the “Photography and Videography” item image is not full height.

Suggestions?
Alvind
April 6, 2026 at 7:29 pm
Hi Drew,

Try this:

First, select the .gb-element-7371120c container inside the Loop Item block, then apply these settings:
```
Display - Flex
Flex Direction - Column
Height - 100%;
```
Next, select the container that wraps the image block. Under Layout > Flex Layout, apply:
```
Flex Grow: 1
Flex Shrink: 1
Flex Basis: 0%
```
Lastly, select the Image block and apply:
```
Width: 100%
Height: 100%
Object Fit: Cover
```
Drew McManus
April 7, 2026 at 6:37 am

With the exception of placing the image in a container and applying those settings, that’s what I had in place. So adding the container and applying those settings did the trick, many thanks!
Alvind
April 7, 2026 at 6:31 pm

Glad to hear that!

Viewing 4 posts - 1 through 4 (of 4 total)