Basic Balanced Layout

This layout uses data-layout="balanced" with XS→XXL breakpoints.

data-slots-xs="1" data-slots-sm="1" data-slots-md="2" data-slots-lg="3" data-slots-xl="3" data-slots-xxl="3">

Card 1

Short content.

Card 2

More text to make this card taller.

Masonry ensures this sits in the shortest column.

Card 3

Medium height example.

Card 4

Another short one.

Card 5

Medium demo card.

Balanced layout will fill columns efficiently.

Card 6

Tall content card.

Great for showing the benefits of masonry.

Image Gallery Layout

4 columns on LG+, 3 on MD, 2 on SM, 1 on XS.

Img 1

Portrait

Img 2

Square format

Img 3

Landscape

Img 4

Tall portrait

Img 5

Medium size

Img 6

Small thumbnail

Img 7

Standard

Img 8

Quick shot

Blog / Article Layout

Article One

Standard article length, fits nicely in two-column layout.

Featured Article

Long article used to demo tall-card distribution.

Masonry ensures this doesn't create large gaps.

Quick Update

Small update card.

Article Four

Standard card demonstrating column balance.