Mosaic Layout

Mosaic Layout

A mosaic layout (also called masonry or Pinterest-style) features items of varying sizes arranged in a visually interesting grid. CSS Grid makes this easy with column and row spanning.

The Grid Setup

.mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 150px;
    gap: 15px;
    padding: 20px;
}

Item Sizes

/* Default: 1 column, 1 row */
.mosaic-item { background: #42b883; border-radius: 8px; }

/* Wide: 2 columns */
.wide { grid-column: span 2; }

/* Tall: 2 rows */
.tall { grid-row: span 2; }

/* Large: 2 columns, 2 rows */
.large {
    grid-column: span 2;
    grid-row: span 2;
}

The HTML

<div class="mosaic">
    <div class="mosaic-item large">Featured</div>
    <div class="mosaic-item">Item 2</div>
    <div class="mosaic-item tall">Item 3</div>
    <div class="mosaic-item">Item 4</div>
    <div class="mosaic-item wide">Item 5</div>
    <div class="mosaic-item">Item 6</div>
    <div class="mosaic-item">Item 7</div>
    <div class="mosaic-item wide">Item 8</div>
    <div class="mosaic-item tall">Item 9</div>
    <div class="mosaic-item">Item 10</div>
</div>

Filling Gaps with grid-auto-flow

.mosaic {
    grid-auto-flow: dense;
}

By default, items flow in order even if it leaves gaps. grid-auto-flow: dense tells the grid to backfill gaps with smaller items that fit — creating a tighter, more visually pleasing layout.

Image Mosaic

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

object-fit: cover ensures images fill their grid cell without distortion — essential for image galleries.

Key Takeaways

• Combine grid-column: span and grid-row: span to create items of different sizes
• grid-auto-flow: dense fills gaps for a tighter mosaic layout
• Use grid-auto-rows to set a consistent base row height
• object-fit: cover makes images fit grid cells perfectly