Responsive Grid
Grid layout patterns using layout-grid and CSS Grid. Responsive by default with no media queries required.
Overview
Vanilla Breeze provides automatic responsive grids through the layout-grid custom element. This snippet includes additional patterns for specific use cases:
- Auto-fit grids - Columns wrap automatically based on available space
- Fixed column grids - Exact column counts with responsive fallbacks
- Asymmetric layouts - Sidebar + content patterns
- Masonry-like layouts - Dense packing for varied-height items
- Named area grids - Dashboard-style complex layouts
Live Demo
Drag the right edge of the demo window to resize and see the grids respond:
layout-grid Element
The simplest way to create responsive grids:
layout-grid usage
<layout-grid data-layout-gap="l" data-layout-min="300px"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div></layout-grid>Attributes:
data-gap- Gap size: xs, s, m, l, xl, 2xl (default: m)data-min- Minimum column width (default: 250px)
Common Grid Patterns
Card Grid
Card grid (3-4 columns)
.card-grid { --grid-min: 280px; --grid-gap: var(--size-l);}Thumbnail Grid
Thumbnail grid (many small items)
.thumbnail-grid { --grid-min: 150px; --grid-gap: var(--size-s);}Feature Grid
Feature grid (2-3 larger columns)
.feature-grid { --grid-min: 350px; --grid-gap: var(--size-xl);}Fixed Column Grids
When you need exact column counts:
Fixed column grids
.grid-2 { display: grid; gap: var(--size-l); grid-template-columns: repeat(2, 1fr);} .grid-3 { display: grid; gap: var(--size-l); grid-template-columns: repeat(3, 1fr);} .grid-4 { display: grid; gap: var(--size-l); grid-template-columns: repeat(4, 1fr);} /* Responsive fallbacks */@media (max-width: 768px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }} @media (max-width: 480px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }}Sidebar Layouts
Asymmetric content + sidebar patterns:
Sidebar layouts
/* Sidebar on right */.grid-sidebar { display: grid; gap: var(--size-xl); grid-template-columns: 1fr 300px;} /* Sidebar on left */.grid-sidebar-left { display: grid; gap: var(--size-xl); grid-template-columns: 250px 1fr;} @media (max-width: 900px) { .grid-sidebar, .grid-sidebar-left { grid-template-columns: 1fr; }}Masonry-Like Layout
Dense packing for items with varied heights:
Masonry layout
.grid-masonry { display: grid; gap: var(--size-l); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-flow: dense;} /* Span items across multiple columns */.grid-masonry .span-2 { grid-column: span 2;} .grid-masonry .span-row { grid-row: span 2;}Gallery Grid
Image gallery with aspect ratio preservation:
Gallery grid
.gallery-grid { display: grid; gap: var(--size-s); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));} .gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; border-radius: var(--radius-s);}Dashboard Grid
Complex layouts with named grid areas:
Dashboard grid
.dashboard-grid { display: grid; gap: var(--size-l); grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr 1fr; grid-template-areas: "header header header header" "sidebar main main main" "sidebar main main main";} .dashboard-grid > header { grid-area: header; }.dashboard-grid > aside { grid-area: sidebar; }.dashboard-grid > main { grid-area: main; } @media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "main"; }}Related
layout-grid Element
Full documentation for the grid element
layout-sidebar Element
Sidebar layout component
Tokens Starter
Size tokens for grid gaps