CSS Grid

Learn CSS Grid Layout for creating powerful two-dimensional layouts with rows and columns for complex web designs.

CSS Grid Layout is a powerful two-dimensional layout system that lets you create complex layouts with rows and columns. It's perfect for creating page layouts, image galleries, and any design that needs precise control over both dimensions.

What is CSS Grid?

CSS Grid is a layout system that:

Works in two dimensions (rows AND columns)
Provides precise control over layout
Makes complex layouts simple
Reduces the need for nested elements
Supports responsive design naturally

Creating a Grid Container

.container {
  display: grid; /* or inline-grid */
}

Defining Columns and Rows

Grid Template Columns

.grid {
  display: grid;
  
  /* Fixed width columns */
  grid-template-columns: 200px 300px 400px;
  
  /* Fractional units (fr) - distributes remaining space */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* Mix of units */
  grid-template-columns: 200px 1fr 2fr;
  
  /* Repeat notation */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  
  /* Auto-fill creates as many columns as fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* Auto-fit collapses empty tracks */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Grid Template Rows

.grid {
  display: grid;
  
  /* Fixed height rows */
  grid-template-rows: 100px 200px 150px;
  
  /* Fractional units */
  grid-template-rows: 1fr 2fr 1fr;
  
  /* Mix of units */
  grid-template-rows: auto 1fr auto; /* Header, content, footer */
}

Gap (Spacing)

.grid {
  display: grid;
  
  /* Gap between rows and columns */
  gap: 20px;
  
  /* Different gaps */
  row-gap: 20px;
  column-gap: 30px;
  
  /* Shorthand */
  gap: 20px 30px; /* row-gap column-gap */
}

Grid Item Placement

Positioning by Line Numbers

.item {
  /* Column placement */
  grid-column-start: 1;
  grid-column-end: 3;
  
  /* Shorthand */
  grid-column: 1 / 3; /* spans from line 1 to 3 */
  
  /* Row placement */
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* Shorthand */
  grid-row: 1 / 2;
  
  /* Span notation */
  grid-column: span 2; /* spans 2 columns */
  grid-row: span 3; /* spans 3 rows */
}

Grid Area Shorthand

.item {
  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 4;
}

Named Grid Lines

.grid {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

.item {
  grid-column: start / middle;
  grid-row: header-start / header-end;
}

Named Grid Areas

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Alignment Properties

Align Items (Vertical)

.grid {
  display: grid;
  
  /* Align all items */
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch; /* Default */
}

.item {
  /* Align individual item */
  align-self: center;
}

Justify Items (Horizontal)

.grid {
  display: grid;
  
  /* Align all items */
  justify-items: start;
  justify-items: end;
  justify-items: center;
  justify-items: stretch; /* Default */
}

.item {
  /* Align individual item */
  justify-self: center;
}

Align Content (Grid Tracks)

.grid {
  display: grid;
  height: 100vh;
  
  /* Vertical alignment of grid tracks */
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

Justify Content (Grid Tracks)

.grid {
  display: grid;
  
  /* Horizontal alignment of grid tracks */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

Practical Examples

Basic Page Layout

<!DOCTYPE html>
<html>
<head>
<style>
  .layout {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main main"
      "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
  }
  
  .header {
    grid-area: header;
    background-color: #333;
    color: white;
    padding: 1rem;
  }
  
  .sidebar {
    grid-area: sidebar;
    background-color: #f0f0f0;
    padding: 1rem;
  }
  
  .main {
    grid-area: main;
    padding: 1rem;
  }
  
  .footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    padding: 1rem;
  }
</style>
</head>
<body>
  <div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

Responsive Card Grid

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

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

Image Gallery

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

.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feature large item */
.gallery-item-large {
  grid-column: span 2;
  grid-row: span 2;
}

Magazine Layout

.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}

.article-hero {
  grid-column: 1 / 9;
  grid-row: 1 / 4;
}

.article-side {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

.article-small {
  grid-column: span 4;
}

Auto-Placement

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px; /* Height of auto-placed rows */
  grid-auto-flow: row; /* row | column | dense */
  gap: 20px;
}

Implicit vs Explicit Grid

Explicit Grid: Defined by grid-template-columns and grid-template-rows
Implicit Grid: Created automatically for items that don't fit the explicit grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Explicit */
  grid-auto-rows: 150px; /* Implicit */
}

MinMax Function

Control minimum and maximum track sizes:

.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  /* Column 1: minimum 200px, maximum 1fr */
}

Fit-Content Function

Size tracks based on content:

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
  /* Column 1: sized to content, max 200px */
}

Grid vs Flexbox

Grid: Two-dimensional, precise control over rows and columns
Flexbox: One-dimensional, flexible distribution along one axis

Use Grid for:

Page layouts
Complex two-dimensional designs
Magazine-style layouts
Image galleries

Use Flexbox for:

Navigation bars
One-dimensional lists
Simple alignments
Component-level layouts

Best Practices

Grid Tips

Use Grid for page-level layouts, Flexbox for components
Use fr units for flexible sizing
Use minmax() for responsive designs without media queries
Name your grid areas for better readability
Use auto-fit or auto-fill for responsive grids
Use grid-template-areas for visual layout definition
Remember: Grid works great with Flexbox (they complement each other)
Use browser DevTools to visualize and debug grids

Browser Support

CSS Grid has excellent modern browser support. For older browsers, provide fallbacks:

.grid {
  display: flex; /* Fallback */
  display: grid; /* Modern browsers */
}

Debugging Grid

Browser DevTools provide excellent Grid inspection:

Chrome/Edge: Grid overlay in Elements panel
Firefox: Dedicated Grid inspector
Visual grid lines and area names
Track sizing information

Master CSS Grid and you'll be able to create sophisticated layouts with clean, maintainable code!

What is CSS Grid?

CSS Grid is a layout system that:

Works in two dimensions (rows AND columns)
Provides precise control over layout
Makes complex layouts simple
Reduces the need for nested elements
Supports responsive design naturally

Creating a Grid Container

.container {
  display: grid; /* or inline-grid */
}

Defining Columns and Rows

Grid Template Columns

.grid {
  display: grid;
  
  /* Fixed width columns */
  grid-template-columns: 200px 300px 400px;
  
  /* Fractional units (fr) - distributes remaining space */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* Mix of units */
  grid-template-columns: 200px 1fr 2fr;
  
  /* Repeat notation */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  
  /* Auto-fill creates as many columns as fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  
  /* Auto-fit collapses empty tracks */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Grid Template Rows

.grid {
  display: grid;
  
  /* Fixed height rows */
  grid-template-rows: 100px 200px 150px;
  
  /* Fractional units */
  grid-template-rows: 1fr 2fr 1fr;
  
  /* Mix of units */
  grid-template-rows: auto 1fr auto; /* Header, content, footer */
}

Gap (Spacing)

.grid {
  display: grid;
  
  /* Gap between rows and columns */
  gap: 20px;
  
  /* Different gaps */
  row-gap: 20px;
  column-gap: 30px;
  
  /* Shorthand */
  gap: 20px 30px; /* row-gap column-gap */
}

Grid Item Placement

Positioning by Line Numbers

.item {
  /* Column placement */
  grid-column-start: 1;
  grid-column-end: 3;
  
  /* Shorthand */
  grid-column: 1 / 3; /* spans from line 1 to 3 */
  
  /* Row placement */
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* Shorthand */
  grid-row: 1 / 2;
  
  /* Span notation */
  grid-column: span 2; /* spans 2 columns */
  grid-row: span 3; /* spans 3 rows */
}

Grid Area Shorthand

.item {
  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 4;
}

Named Grid Lines

.grid {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

.item {
  grid-column: start / middle;
  grid-row: header-start / header-end;
}

Named Grid Areas

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Alignment Properties

Align Items (Vertical)

.grid {
  display: grid;
  
  /* Align all items */
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch; /* Default */
}

.item {
  /* Align individual item */
  align-self: center;
}

Justify Items (Horizontal)

.grid {
  display: grid;
  
  /* Align all items */
  justify-items: start;
  justify-items: end;
  justify-items: center;
  justify-items: stretch; /* Default */
}

.item {
  /* Align individual item */
  justify-self: center;
}

Align Content (Grid Tracks)

.grid {
  display: grid;
  height: 100vh;
  
  /* Vertical alignment of grid tracks */
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

Justify Content (Grid Tracks)

.grid {
  display: grid;
  
  /* Horizontal alignment of grid tracks */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

Practical Examples

Basic Page Layout

<!DOCTYPE html>
<html>
<head>
<style>
  .layout {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main main"
      "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
  }
  
  .header {
    grid-area: header;
    background-color: #333;
    color: white;
    padding: 1rem;
  }
  
  .sidebar {
    grid-area: sidebar;
    background-color: #f0f0f0;
    padding: 1rem;
  }
  
  .main {
    grid-area: main;
    padding: 1rem;
  }
  
  .footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    padding: 1rem;
  }
</style>
</head>
<body>
  <div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

Responsive Card Grid

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

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

Image Gallery

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

.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Feature large item */
.gallery-item-large {
  grid-column: span 2;
  grid-row: span 2;
}

Magazine Layout

.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}

.article-hero {
  grid-column: 1 / 9;
  grid-row: 1 / 4;
}

.article-side {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

.article-small {
  grid-column: span 4;
}

Auto-Placement

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px; /* Height of auto-placed rows */
  grid-auto-flow: row; /* row | column | dense */
  gap: 20px;
}

Implicit vs Explicit Grid

Explicit Grid: Defined by grid-template-columns and grid-template-rows
Implicit Grid: Created automatically for items that don't fit the explicit grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Explicit */
  grid-auto-rows: 150px; /* Implicit */
}

MinMax Function

Control minimum and maximum track sizes:

.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  /* Column 1: minimum 200px, maximum 1fr */
}

Fit-Content Function

Size tracks based on content:

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
  /* Column 1: sized to content, max 200px */
}

Grid vs Flexbox

Grid: Two-dimensional, precise control over rows and columns
Flexbox: One-dimensional, flexible distribution along one axis

Use Grid for:

Page layouts
Complex two-dimensional designs
Magazine-style layouts
Image galleries

Use Flexbox for:

Navigation bars
One-dimensional lists
Simple alignments
Component-level layouts

Best Practices

Grid Tips

Use Grid for page-level layouts, Flexbox for components
Use fr units for flexible sizing
Use minmax() for responsive designs without media queries
Name your grid areas for better readability
Use auto-fit or auto-fill for responsive grids
Use grid-template-areas for visual layout definition
Remember: Grid works great with Flexbox (they complement each other)
Use browser DevTools to visualize and debug grids

Browser Support

CSS Grid has excellent modern browser support. For older browsers, provide fallbacks:

.grid {
  display: flex; /* Fallback */
  display: grid; /* Modern browsers */
}

Debugging Grid

Browser DevTools provide excellent Grid inspection:

Chrome/Edge: Grid overlay in Elements panel
Firefox: Dedicated Grid inspector
Visual grid lines and area names
Track sizing information

Master CSS Grid and you'll be able to create sophisticated layouts with clean, maintainable code!

CSS Grid

On this page

CSS Grid

On this page