Complete CSS Grid Properties Cheat Sheet: A Comprehensive Visual Guide

Introduction to CSS Grid

CSS Grid Layout is a two-dimensional layout system designed for the web, allowing developers to create complex grid-based layouts with rows and columns. It revolutionizes web layout by providing direct control over both dimensions simultaneously, unlike previous one-dimensional solutions.

Core CSS Grid Concepts

• Grid Container: The element with display: grid applied
• Grid Items: The direct children of the grid container
• Grid Lines: The horizontal and vertical dividing lines that form the grid structure
• Grid Tracks: The rows and columns of the grid
• Grid Cells: The intersection of a row and column
• Grid Areas: Named regions of the grid spanning multiple cells

Setting Up CSS Grid

/* Basic Grid Setup */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* 3 columns */
  grid-template-rows: auto 300px auto;   /* 3 rows */
  gap: 20px;                             /* space between items */
}

Grid Container Properties

Grid Item Properties

FR Unit and Special Functions

• fr unit: Fraction of available space (1fr = 1 part of space)
• repeat(): Repeats track definitions (repeat(3, 1fr) = 1fr 1fr 1fr)
• minmax(): Sets min and max size of track (minmax(100px, 1fr))
• auto-fill: Creates as many tracks as fit (repeat(auto-fill, minmax(200px, 1fr)))
• auto-fit: Similar to auto-fill but collapses empty tracks (repeat(auto-fit, minmax(200px, 1fr)))

Common Grid Layouts

Holy Grail Layout (Header, Footer, Left Sidebar, Content, Right Sidebar)

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar-1 content sidebar-2"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

Card Grid Layout

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Responsive Grid Techniques

Using CSS Grid with Media Queries

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Mobile first: single column */
  gap: 10px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
  }
}

Auto-fit and Auto-fill for Responsive Grids

/* Responsive grid that adjusts columns automatically */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Grid vs Flexbox Comparison

Common Challenges and Solutions

Challenge: Items Overflowing Grid

Solution: Use minmax() with clamp values:

.container {
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
}

Challenge: Maintaining Aspect Ratio

Solution: Use aspect-ratio on grid items:

.grid-item {
  aspect-ratio: 16 / 9;
}

Challenge: Grid Areas Not Working

Solution: Ensure grid-template-areas has quotes and full rectangular areas:

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Challenge: Browser Support

Solution: Use feature detection and provide fallbacks:

@supports (display: grid) {
  .container {
    display: grid;
    /* grid properties */
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
    /* flexbox fallback */
  }
}

Best Practices and Tips

• Start with container: Define your grid container before styling items
• Name your lines: Use named lines for more maintainable code

  .container {  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];}
  

• Use grid areas for clearer layouts rather than line numbers
• Embrace auto-placement where possible for more flexible layouts
• Combine with flexbox: Use Grid for page layout, Flexbox for component layout
• Use fr units instead of percentages for flexible layouts
• Keep it simple: Don’t overcomplicate your grid structure
• Set explicit dimensions for fixed layouts and min/max sizes for responsive ones
• Use dev tools: Chrome/Firefox Grid inspector tools help visualize and debug
• Test across browsers: While support is good, implementations may vary slightly

Resources for Further Learning

• Documentation:
  • MDN CSS Grid Layout
  • CSS Tricks: Complete Guide to Grid
• Interactive Learning:
  • Grid Garden – Game for learning Grid
  • Wes Bos CSS Grid Course – Free video tutorial series
• Tools:
  • Grid Generator
  • Firefox Grid Inspector
• Advanced Reading:
  • Rachel Andrew’s Grid by Example
  • Jen Simmons’ Layout Land