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 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 { --grid-min: 280px; --grid-gap: var(--size-l); }

Thumbnail Grid

.thumbnail-grid { --grid-min: 150px; --grid-gap: var(--size-s); }

Feature Grid

.feature-grid { --grid-min: 350px; --grid-gap: var(--size-xl); }

Fixed Column Grids

When you need exact column counts:

 .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 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:

 .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 { 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 { 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