CSS Grid Patterns

Discover common CSS Grid layout patterns for modern web design

What are CSS Grid Patterns?

CSS Grid Patterns are reusable layout solutions for common design challenges. These patterns leverage the power of CSS Grid Layout to create complex, responsive designs with clean, maintainable code.

Common Grid Patterns:

  • Holy Grail Layout - Header, footer, and three columns
  • Card Grids - Responsive grid of content cards
  • Dashboard Layout - Sidebar with main content area
  • Magazine Layout - Complex editorial-style layouts
  • Masonry Layout - Pinterest-style variable height grid
  • Form Layout - Structured form designs
  • Pricing Tables - Responsive comparison tables
  • Image Galleries - Responsive image grids

CSS Grid Patterns Reference

PatternDescriptionKey Features
Holy GrailClassic layout with header, footer, and three columnsGrid areas, fixed and fluid columns
Card GridResponsive grid of content cardsauto-fit, minmax(), nested grids
DashboardSidebar navigation with main content areaNested grids, fixed sidebar
MagazineEditorial-style layout with varied content placementExplicit grid, line-based placement
MasonryPinterest-style layout with variable height itemsgrid-auto-rows, dense packing
Form LayoutStructured form with labels and inputsNamed grid lines, alignment
Pricing TableResponsive comparison tablesauto-fit, feature highlighting
Image GalleryResponsive image gridsaspect-ratio, span placement

CSS Grid Patterns in Action

Example Code

/* CSS Grid Patterns */

/* Holy Grail Layout */
.holy-grail {
  display: grid;
  grid-template: 
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto / 
    200px 1fr 200px;
  min-height: 100vh;
}

.holy-grail-header { grid-area: header; }
.holy-grail-nav { grid-area: nav; }
.holy-grail-main { grid-area: main; }
.holy-grail-aside { grid-area: aside; }
.holy-grail-footer { grid-area: footer; }

/* Card Grid Layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-header { padding: 15px; }
.card-body { padding: 15px; }
.card-footer { padding: 15px; }

/* Dashboard Layout */
.dashboard {
  display: grid;
  grid-template: 
    "sidebar header" auto
    "sidebar main" 1fr / 
    250px 1fr;
  min-height: 100vh;
}

.dashboard-header { grid-area: header; }
.dashboard-sidebar { grid-area: sidebar; }
.dashboard-main { 
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.dashboard-widget {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Magazine Layout */
.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
  padding: 20px;
}

.magazine-header {
  grid-column: 1 / -1;
}

.magazine-featured {
  grid-column: 1 / 8;
  grid-row: span 2;
}

.magazine-secondary {
  grid-column: 8 / -1;
}

.magazine-tertiary {
  grid-column: span 4;
}

/* Masonry Layout */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px; /* Controls the row height precision */
  gap: 15px;
}

.masonry-item {
  border-radius: 8px;
  overflow: hidden;
}

.masonry-item.small { grid-row-end: span 20; }
.masonry-item.medium { grid-row-end: span 30; }
.masonry-item.large { grid-row-end: span 40; }

/* Form Layout */
.form-grid {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr [info] auto;
  gap: 15px;
  align-items: center;
}

.form-grid label {
  grid-column: labels;
  text-align: right;
  padding-right: 10px;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  grid-column: controls;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-grid .form-info {
  grid-column: info;
  padding-left: 10px;
  color: #666;
}

/* Pricing Table */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.pricing-plan {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.pricing-plan.featured {
  border: 2px solid #4CAF50;
  transform: scale(1.05);
}

/* Image Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 4px;
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item.big {
  grid-column: span 2;
  grid-row: span 2;
}

/* Responsive Grid System */
.grid-system {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .grid-system {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .col-1, .col-2, .col-3, 
  .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 {
    grid-column: 1 / -1;
  }
}

/* Overlap Layout */
.overlap-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.overlap-grid > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.overlap-content {
  z-index: 1;
  padding: 20px;
}

.overlap-background {
  z-index: 0;
  background-size: cover;
  background-position: center;
}

/* Calendar Layout */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: #e1e1e1;
  border: 1px solid #e1e1e1;
}

.calendar-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f5f5f5;
  font-weight: bold;
}

.calendar-day {
  background-color: white;
  min-height: 100px;
  padding: 8px;
}

.calendar-day.other-month {
  background-color: #f9f9f9;
  color: #ccc;
}

/* Asymmetrical Layout */
.asymmetrical {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

.asymmetrical-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}

.asymmetrical-item:nth-child(2) {
  grid-column: 3;
  grid-row: 1 / 3;
}

.asymmetrical-item:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.asymmetrical-item:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

/* Zigzag Layout */
.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.zigzag-item:nth-child(odd) .zigzag-content {
  order: 1;
}

.zigzag-item:nth-child(even) .zigzag-content {
  order: 2;
}

.zigzag-item:nth-child(odd) .zigzag-image {
  order: 2;
}

.zigzag-item:nth-child(even) .zigzag-image {
  order: 1;
}

/* Full-page Layout */
.full-page {
  display: grid;
  grid-template: 
    "header" auto
    "main" 1fr
    "footer" auto / 
    1fr;
  min-height: 100vh;
}

.full-page-header { grid-area: header; }
.full-page-main { grid-area: main; }
.full-page-footer { grid-area: footer; }

/* Split Screen Layout */
.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .split-screen {
    grid-template-columns: 1fr;
  }
}

/* CSS Grid Frameworks */
:root {
  --grid-columns: 12;
  --grid-gap: 20px;
}

.grid-framework {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.grid-cell {
  grid-column: span var(--span, 1);
}

/* Animation Patterns */
.animated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.animated-grid-item {
  transition: all 0.3s ease;
}

.animated-grid:hover .animated-grid-item {
  transform: scale(0.95);
  opacity: 0.8;
}

.animated-grid .animated-grid-item:hover {
  transform: scale(1.05);
  opacity: 1;
  z-index: 1;
}

Grid Pattern Techniques

Holy Grail Layout

The classic layout pattern with header, footer, and three content columns.

Card Grid Layout

Responsive grid of cards that adapt to different screen sizes.

Masonry Layout

Pinterest-style layout with items of varying heights.

Dashboard Layout

Sidebar navigation with a main content area for widgets.

Best Practices for Grid Patterns

Effective Implementation

  • Use semantic HTML structure with grid for layout
  • Start with mobile-first responsive approach
  • Use named grid areas for better maintainability
  • Combine grid with flexbox for component layouts
  • Test patterns across various screen sizes and devices
  • Use CSS variables for consistent spacing and sizing

Common Mistakes to Avoid

  • Overcomplicating grid patterns unnecessarily
  • Not providing fallbacks for older browsers
  • Forgetting to test patterns with real content
  • Using too many grid properties when simpler solutions exist
  • Ignoring accessibility when reordering content visually
  • Not considering performance with complex nested grids

Browser Support & Accessibility

  • CSS Grid is supported in all modern browsers
  • Use feature queries (@supports) for progressive enhancement
  • Ensure proper reading order when using grid for visual reordering
  • Test with screen readers and keyboard navigation
  • Consider using logical properties for RTL support
  • Provide appropriate focus indicators for interactive grid items

Ready to Try It Yourself?

Experiment with CSS Grid Patterns in our interactive editor. See your changes in real-time and build your understanding through practice.

< PreviousNext >