🔲 Asymmetric Mosaic Grid

A mosaic layout breaks the uniform grid by giving one or more items a larger footprint. It creates visual hierarchy through size — perfect for feature announcements, landing pages, and portfolio sites.

grid-template-columns: 2fr 1fr 1frgrid-row: span Ngrid-column: span N

1. Product Feature Showcase

A 3-column grid where the leftmost column is twice as wide as the others. The feature takes the full height of the left column while smaller items fill the right side.

Live Demo

🚀

Launch Faster with CSS Grid

Build complex layouts in minutes, not days. No frameworks required.

Get Started →

⚡

Blazing Fast

Zero JS layout

📱

Responsive

Adapts automatically

🎯

Precise

Pixel-perfect control

🧩

Flexible

Any layout possible

♿

Accessible

Source order preserved

🌍

Universal

All modern browsers

CSS

.mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
}

.feature {
  grid-column: 1;
  grid-row: 1 / 4; /* spans all 3 rows */
  /* 6 small items auto-place in right 2 columns */
}

💡 The magic: only the feature needs explicit placement. All 6 small items auto-place in the remaining cells, filling them perfectly.

2. Bento Box Grid

The popular 'Bento' design trend (popularized by Apple's product pages). Items of various sizes create a visually rich, impactful layout.

Live Demo

⊞

CSS Grid

The future of layout is here

2D Layout

Control rows AND columns at once

frFractional Units

🎯Named Areas

🔁

repeat() + minmax()

Responsive without media queries

98%Browser support

🪆Subgrid

CSS

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr auto;
  gap: 8px;
}

.hero   { grid-column: 1 / 3; grid-row: 1 / 3; }
.top-r  { grid-column: 3 / 5; grid-row: 1;     }
.mid-l  { grid-column: 1 / 3; grid-row: 3;     }
/* Other items auto-place */

💡 Bento grids look complex but are simple to build: pick 2–3 key items to explicitly place, let everything else auto-place naturally.

3. Portfolio / Case Study Grid

A designer portfolio or case study grid where featured projects are larger. Alternating which corner the featured project is in adds visual rhythm.

Live Demo

Featured🎨

Brand Identity

View case study →

💻

Web Design

View case study →

📱

Mobile App

View case study →

Featured🎬

Motion Design

View case study →

CSS

.portfolio {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

/* Featured items explicitly placed */
.featured-left  { grid-column: 1; }
.featured-right { grid-column: 2; }

/* Creates alternating asymmetry: */
/* Row 1: big(1) small(2) */
/* Row 2: small(1) big(2) */