Advanced CSS Grid Techniques

Master complex and powerful CSS Grid layout techniques for modern web design.

Grid Template Areas

Create complex layouts with named grid areas for improved readability and maintainability.

/* CSS */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Responsive layout - mobile first */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
  }
}
HTML Structure: 
<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main Content</main>
  <aside class="aside">Aside</aside>
  <footer class="footer">Footer</footer>
</div>
Live Example:
Header
Sidebar
Content
Footer

Auto-Placement and Auto-Fill/Fit

Create responsive, dynamic layouts that automatically adjust based on available space.

/* Auto-fill: Creates as many tracks as possible */
.gallery-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Auto-fit: Creates as many tracks as needed, expands to fill space */
.gallery-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Dense packing algorithm */
.gallery-dense {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  gap: 1rem;
  grid-auto-flow: dense; /* Key for filling in gaps */
}

/* Items with different sizes */
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.large { 
  grid-column: span 2; 
  grid-row: span 2;
}
Key Differences:
  • auto-fill: Creates as many tracks as can fit, even empty ones
  • auto-fit: Creates only as many tracks as needed, expands them to fill space
  • grid-auto-flow: dense: Attempts to fill in all gaps by placing smaller items in available spaces
Auto-fit Example (resize browser to see effect):
Item 1
Item 2
Item 3
Item 4
Item 5

Masonry-Like Layouts with Grid

Create Pinterest-style masonry layouts using pure CSS Grid without JavaScript.

/* CSS for masonry-like layout */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  gap: 15px;
}

/* Define specific item sizes */
.masonry-item:nth-child(1) { grid-row: span 2; }
.masonry-item:nth-child(4) { grid-row: span 3; }
.masonry-item:nth-child(5) { grid-column: span 2; }
.masonry-item:nth-child(8) { 
  grid-row: span 2; 
  grid-column: span 2;
}

/* For a more dynamic approach */
.masonry-grid-dynamic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 20px;
  gap: 15px;
}

/* Use JavaScript to set grid-row-end based on content height */
.masonry-item-dynamic {
  grid-row-end: span calc(var(--height) / 20);
}
JavaScript for Dynamic Heights: 
// Calculate and set spans based on content height
function resizeGridItems() {
  const grid = document.querySelector('.masonry-grid-dynamic');
  const items = grid.querySelectorAll('.masonry-item-dynamic');
  
  items.forEach(item => {
    const height = item.getBoundingClientRect().height;
    const rowSpan = Math.ceil(height / 20); // 20px row height
    item.style.setProperty('--height', height);
  });
}

// Run on load and resize
window.addEventListener('load', resizeGridItems);
window.addEventListener('resize', resizeGridItems);
Masonry-Like Layout Example:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Subgrid

Align nested grid items to the parent grid's track lines for perfect alignment across components.

/* Parent grid */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Child that spans all columns but uses parent's column tracks */
.child-span-all {
  grid-column: 1 / -1; /* Span all columns */
  display: grid;
  grid-template-columns: subgrid; /* Use parent's column tracks */
}

/* Child that spans 2 columns but uses parent's column tracks */
.child-span-partial {
  grid-column: 1 / 3; /* Span first two columns */
  display: grid;
  grid-template-columns: subgrid; /* Use parent's column tracks */
}

/* For rows */
.row-subgrid {
  grid-row: 1 / 3; /* Span two rows */
  display: grid;
  grid-template-rows: subgrid; /* Use parent's row tracks */
}
Browser Support Note:

Subgrid is supported in Firefox and is coming to other browsers. For now, you may need fallbacks:

@supports (grid-template-columns: subgrid) {
  .child-span-all {
    grid-template-columns: subgrid;
  }
}

/* Fallback for browsers without subgrid support */
.child-span-all {
  grid-template-columns: 1fr 1fr 1fr;
}
Subgrid Concept Example:
Item 1
Item 2
Item 3
Subgrid 1
Subgrid 2
Subgrid 3

Grid Alignment and Positioning

Master grid item alignment and positioning for pixel-perfect layouts.

/* Container alignment properties */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  
  /* Align tracks within container */
  justify-content: center;     /* Horizontal alignment of all tracks */
  align-content: center;       /* Vertical alignment of all tracks */
  
  /* Align items within their cells */
  justify-items: center;       /* Horizontal alignment of items in cells */
  align-items: center;         /* Vertical alignment of items in cells */
}

/* Individual item alignment */
.grid-item {
  /* Override container alignment for specific item */
  justify-self: start;         /* Horizontal: start, end, center, stretch */
  align-self: end;             /* Vertical: start, end, center, stretch */
}

/* Positioning items with grid-column and grid-row */
.item-positioned {
  /* Start at line 1, end at line 3 (span 2 columns) */
  grid-column: 1 / 3;          /* or grid-column: 1 / span 2; */
  
  /* Start at line 2, end at line 4 (span 2 rows) */
  grid-row: 2 / 4;             /* or grid-row: 2 / span 2; */
}

/* Negative line numbers count from end */
.item-from-end {
  grid-column: 1 / -1;         /* Span all columns (1 to last line) */
  grid-row: -3 / -1;           /* Span last 2 rows */
}
Alignment Cheat Sheet:
  • justify-content/align-content: How tracks are distributed in the container
  • justify-items/align-items: Default alignment for all items within their cells
  • justify-self/align-self: Override alignment for specific items

Values: start, end, center, stretch, space-around, space-between, space-evenly

Grid Template Shorthand

Streamline your grid code with powerful shorthand properties.

/* Long-form grid definition */
.grid-longform {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

/* Shorthand with grid-template */
.grid-template-shorthand {
  display: grid;
  grid-template: 
    "header header header" auto
    "sidebar content aside" 1fr
    "footer footer footer" auto
    / 1fr 3fr 1fr;
  gap: 20px;
}

/* Super shorthand with grid */
.grid-super-shorthand {
  display: grid;
  grid:
    "header header header" auto
    "sidebar content aside" 1fr
    "footer footer footer" auto
    / 1fr 3fr 1fr;
  gap: 20px;
}

/* Shorthand for tracks */
.grid-tracks-shorthand {
  display: grid;
  grid: auto 1fr auto / repeat(3, 1fr);
  gap: 20px;
}
Understanding the Shorthand:
  • grid-template: Combines grid-template-areas, grid-template-rows, and grid-template-columns
  • grid: Super shorthand that can also include grid-auto-rows, grid-auto-columns, and grid-auto-flow
  • Format: "area-names" row-size / column-sizes
  • For grid-tracks-shorthand: row-sizes / column-sizes

Grid for Component Layouts

Using Grid for complex UI components like cards, forms, and dashboards.

/* Card component with grid */
.card {
  display: grid;
  grid-template-areas:
    "image image"
    "title title"
    "desc desc"
    "price cta";
  grid-template-columns: 1fr auto;
  grid-template-rows: 200px auto auto auto;
  gap: 10px;
  max-width: 350px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card__image { grid-area: image; }
.card__title { grid-area: title; }
.card__description { grid-area: desc; }
.card__price { grid-area: price; }
.card__cta { grid-area: cta; }

/* Form layout with grid */
.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 15px 20px;
  align-items: center;
}

/* Span full width for certain elements */
.form__header,
.form__submit {
  grid-column: 1 / -1;
}

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  height: 100vh;
}

.dashboard__header { grid-column: 1 / -1; }
.dashboard__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.dashboard__main { grid-column: 1 / 4; }
.dashboard__sidebar { grid-column: 4 / 5; }
HTML for Card Component: 
<div class="card">
  <img class="card__image" src="product.jpg" alt="Product">
  <h3 class="card__title">Product Name</h3>
  <p class="card__description">Product description goes here...</p>
  <div class="card__price">$99.99</div>
  <button class="card__cta">Add to Cart</button>
</div>

Combining Grid with Flexbox

Leverage the strengths of both layout systems for optimal UI design.

/* Page layout with Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

/* Navigation with Flexbox inside Grid area */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.nav {
  display: flex;
  gap: 20px;
}

/* Card grid with Flexbox cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__content {
  flex: 1; /* Takes up remaining space */
}

.card__footer {
  margin-top: auto; /* Pushes to bottom */
  display: flex;
  justify-content: space-between;
}
When to Use Each:
  • Grid: Two-dimensional layouts, overall page structure, complex component layouts
  • Flexbox: One-dimensional layouts, alignment within grid cells, navigation menus, small UI components

Best Practices

Grid Layout Design

  • Start with content structure before defining grid layout
  • Use named grid areas for complex layouts to improve readability
  • Consider mobile layouts first, then expand for larger screens
  • Use minmax() with auto-fill/auto-fit for responsive designs
  • Avoid fixed track sizes when possible; use flexible units (fr, %, auto)

Performance

  • Limit the number of explicit grid tracks for better performance
  • Use grid-template-areas for layout changes instead of redefining the entire grid
  • Be cautious with auto-placement in very large grids
  • Consider will-change: transform for grid items that animate
  • Test performance on lower-end devices

Accessibility

  • Ensure logical source order in HTML for screen readers
  • Test keyboard navigation through your grid layouts
  • Use appropriate semantic HTML elements within grid items
  • Consider how your layout reflows when zoomed in
  • Test with screen readers to ensure content makes sense

More Topics in Layout

Flexbox Layout

Master flexible box layouts for responsive design

Grid Layout

Create powerful two-dimensional layouts with CSS Grid

Media Queries

Create responsive designs with CSS media queries

Logical Properties

Learn about CSS logical properties for better internationalization support

Container Queries: Basics

Understand the fundamentals of CSS Container Queries for component-level responsiveness

Container Queries: Advanced

Explore advanced techniques and patterns with CSS Container Queries

Print Media Styles

Optimize your CSS for print media

Modern Layout Techniques

Combining Flexbox, Grid, and other layout methods for complex designs