CSS Grid Layout

CSS Advanced•Reading time: 7 min

CSS Grid Layout is a powerful two-dimensional layout system designed to handle both rows and columns simultaneously, making complex layouts more intuitive to create.

In this tutorial, you'll learn how to use CSS Grid to create sophisticated layouts that were previously difficult to achieve with other CSS techniques.

1Grid Basics

CSS Grid consists of a parent element (the grid container) and its child elements (grid items). Setting display: grid on an element makes it a grid container.

html

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
</style>

Grid Terminology:

Grid Container: The element with display: grid
Grid Item: The direct children of the grid container
Grid Line: The dividing lines that make up the grid structure
Grid Cell: The space between four grid lines
Grid Track: The space between two adjacent grid lines (a row or column)
Grid Area: The space surrounded by four grid lines

Visual Example:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

A basic 3-column grid layout with 6 items

2Grid Container Properties

These properties define the structure of the grid and are applied to the grid container.

grid-template-columns

css

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  /* Fixed widths */
  
  /* Or using fr units */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* Or using repeat() */
  grid-template-columns: repeat(3, 1fr);
  
  /* Auto-fill and minmax */
  grid-template-columns: repeat(auto-fill, 
                         minmax(200px, 1fr));
}

Defines the columns of the grid with their sizes.

grid-template-rows

css

.grid-container {
  display: grid;
  grid-template-rows: 100px auto 100px;
  /* First row 100px, second auto, 
     third 100px */
  
  /* Using fr units */
  grid-template-rows: 1fr 2fr;
  
  /* Repeat pattern */
  grid-template-rows: repeat(3, 100px);
}

Defines the rows of the grid with their sizes.

grid-gap

css

.grid-container {
  display: grid;
  grid-gap: 20px; /* Same for rows and columns */
  
  /* Or different values */
  grid-row-gap: 20px;    /* Between rows */
  grid-column-gap: 10px; /* Between columns */
  
  /* Modern syntax */
  gap: 20px;
  row-gap: 20px;
  column-gap: 10px;
}

Sets the gaps (gutters) between rows and columns.

justify-content and align-content

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  
  /* Container is wider than the grid */
  width: 500px;
  
  /* Align grid horizontally */
  justify-content: center;
  /* Options: start, end, center, 
     space-between, space-around, space-evenly */
  
  /* Align grid vertically */
  align-content: center;
  /* Same options as justify-content */
}

Aligns the grid within the container.

Visual Examples:

fr units

1fr

2fr

1fr

minmax and auto-fill

Auto-resizing item

Resize your browser to see how these items reflow

3Grid Item Properties

These properties control the placement and sizing of individual grid items.

grid-column and grid-row

css

.item {
  /* Start at line 1, end at line 3 */
  grid-column: 1 / 3;
  
  /* Span 2 columns from its position */
  grid-column: span 2;
  
  /* Start at line 2, end at line 4 */
  grid-row: 2 / 4;
  
  /* Shorthand for column-start/column-end */
  grid-column-start: 1;
  grid-column-end: 3;
  
  /* Shorthand for row-start/row-end */
  grid-row-start: 1;
  grid-row-end: 3;
}

Controls which grid lines an item starts and ends at.

grid-area

css

.item {
  /* Shorthand for row-start / column-start
     / row-end / column-end */
  grid-area: 1 / 1 / 3 / 3;
  
  /* Or use with named grid areas */
  grid-area: header;
  /* (works with grid-template-areas) */
}

Shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end.

Visual Example:

grid-column: span 2;
grid-row: span 2;

Item 2

Item 3

grid-column: span 2;

Item 5

A grid with items that span multiple cells

4Grid Template Areas

Grid template areas provide a more visual way to define your grid layout by naming areas and referencing them in your CSS.

html

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100vh;
  gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: content; }
.footer { grid-area: footer; }
</style>

Rules for Template Areas:

Each row needs the same number of cells
Use periods (.) for empty cells
Area names must be surrounded by quotes
Areas must form rectangles (no L-shapes)

Visual Example:

Header

Sidebar

Main Content

Footer

A common page layout using grid-template-areas

5Try It Yourself

Create a responsive dashboard layout using CSS Grid. The layout should adapt to different screen sizes by changing its structure.

dashboard-grid.css

Example Code

css

.dashboard {
  display: grid;
  gap: 20px;
  padding: 20px;
  
  /* Mobile layout: single column */
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "stats"
    "main"
    "sidebar"
    "footer";
}

/* Tablet layout */
@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "stats stats"
      "main sidebar"
      "footer footer";
  }
}

/* Desktop layout */
@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
      "header header header"
      "sidebar main stats"
      "sidebar footer footer";
  }
}

.header { 
  grid-area: header;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

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

.sidebar { 
  grid-area: sidebar;
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
}

.stats { 
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

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

.footer { 
  grid-area: footer;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

Pro Tip

The power of CSS Grid becomes particularly evident when combined with media queries for responsive designs. You can completely rearrange layouts based on screen size by just changing the grid-template-areas property, without modifying your HTML structure.

Summary

✓
CSS Grid is a two-dimensional layout system for rows and columns
✓
Use fr units for flexible track sizes and minmax() for responsive layouts
✓
Control item placement with grid-column, grid-row, and grid-area
✓
Create complex layouts visually with grid-template-areas

Previous: Flexbox Next: Responsive Design