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. sdfsdfs
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.
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 */
}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
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.
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 */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
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.
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) */