CSS Grid Layout

Master the powerful two-dimensional layout system for creating complex web layouts.

What is CSS Grid?

CSS Grid Layout is a powerful two-dimensional layout system designed for the web. It lets you lay out items in rows and columns, and has many features that make building complex layouts straightforward.

Key Features:

  • Two-dimensional: Control both rows and columns simultaneously
  • Flexible: Items can span multiple rows and columns
  • Responsive: Easy to create responsive layouts
  • Powerful: Complex layouts with minimal code
  • Modern: Designed for modern web applications

Grid vs Flexbox

Flexbox: One-dimensional layout (either rows OR columns)

CSS Grid: Two-dimensional layout (rows AND columns)

Use Flexbox for components, CSS Grid for page layouts!

Grid Container

Creating a Grid Container

To create a CSS Grid, you need to set the display property to grid or inline-grid on a container element.

/* Basic grid container */
.grid-container {
    display: grid;
}

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

Basic Grid Demo

1
2
3
4
5
6

3 columns × 2 rows grid layout

Grid Template Columns

Defining Column Tracks

The grid-template-columns property defines the columns in your grid layout.

/* Fixed width columns */
.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

/* Fractional units */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Equal width columns */
}

/* Mixed units */
.grid {
    display: grid;
    grid-template-columns: 200px 1fr 2fr; /* Fixed, 1 fraction, 2 fractions */
}

/* Using repeat() function */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

/* Auto-fit with minimum width */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Column Layout Examples

Equal Width Columns (1fr 1fr 1fr)
1fr
1fr
1fr
Mixed Units (200px 1fr 2fr)
200px
1fr
2fr
Auto-fit Responsive (minmax(150px, 1fr))
Auto
Fit
Grid
Items

Understanding Fractional Units (fr)

The fr unit represents a fraction of the available space in the grid container.

  • 1fr = 1 fraction of available space
  • 2fr = 2 fractions (twice as wide as 1fr)
  • 1fr 2fr 1fr = 25% 50% 25% of available space

Grid Template Rows

Defining Row Tracks

The grid-template-rows property defines the rows in your grid layout.

/* Fixed height rows */
.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
}

/* Fractional units */
.grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

/* Mixed units */
.grid {
    display: grid;
    grid-template-rows: 100px 1fr 2fr;
}

/* Using repeat() function */
.grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}

/* Auto height rows */
.grid {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, content, footer */
}

Row Layout Examples

Fixed Height Rows (100px each)
Row 1
Row 1
Row 1
Row 2
Row 2
Row 2
Mixed Row Heights (100px 1fr 50px)
100px
100px
100px
1fr
1fr
1fr
50px
50px
50px

Grid Gap

Adding Space Between Grid Items

The gap property creates space between grid items without affecting the outer edges.

/* Equal gap for rows and columns */
.grid {
    display: grid;
    gap: 20px;
}

/* Different gaps for rows and columns */
.grid {
    display: grid;
    gap: 20px 10px; /* row-gap column-gap */
}

/* Individual gap properties */
.grid {
    display: grid;
    row-gap: 20px;
    column-gap: 10px;
}

/* No gap */
.grid {
    display: grid;
    gap: 0;
}

Gap Examples

No Gap
1
2
3
4
5
6
Small Gap (10px)
1
2
3
4
5
6
Large Gap (30px)
1
2
3
4
5
6

Grid Lines

Understanding Grid Lines

Grid lines are the dividing lines that make up the structure of the grid. They are numbered starting from 1, and you can reference them to position grid items.

/* Positioning items using line numbers */
.grid-item {
    grid-column: 1 / 3; /* Start at line 1, end at line 3 */
    grid-row: 1 / 2;    /* Start at line 1, end at line 2 */
}

/* Using span keyword */
.grid-item {
    grid-column: 1 / span 2; /* Start at line 1, span 2 columns */
    grid-row: 1 / span 2;    /* Start at line 1, span 2 rows */
}

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

Grid Lines Visualization

Spans 2 columns
Spans 2 rows
Single cell
Single cell

Grid lines are shown as dotted lines. Items can span multiple cells.

Grid Areas

Creating Named Grid Areas

Grid areas allow you to create named regions in your grid layout, making it easier to create complex layouts.

/* Define grid areas on container */
.layout {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* Assign elements to areas */
.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Grid Areas Layout Demo

Header
Sidebar
Main Content

Responsive Grid Areas

/* Mobile layout */
.layout {
    display: grid;
    grid-template-areas: 
        "header"
        "main"
        "sidebar"
        "footer";
    grid-template-columns: 1fr;
}

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

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

Grid Item Properties

Positioning Grid Items

You can control how individual grid items are positioned and sized within the grid.

/* Grid column positioning */
.item {
    grid-column-start: 1;
    grid-column-end: 3;
    /* Shorthand: */
    grid-column: 1 / 3;
}

/* Grid row positioning */
.item {
    grid-row-start: 1;
    grid-row-end: 3;
    /* Shorthand: */
    grid-row: 1 / 3;
}

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

/* Using span */
.item {
    grid-column: 1 / span 2; /* Start at 1, span 2 columns */
    grid-row: 1 / span 2;    /* Start at 1, span 2 rows */
}

Grid Item Properties Reference

Property Values Description
grid-column-start number, span number, auto Start position of item in column
grid-column-end number, span number, auto End position of item in column
grid-column start / end Shorthand for column start/end
grid-row-start number, span number, auto Start position of item in row
grid-row-end number, span number, auto End position of item in row
grid-row start / end Shorthand for row start/end
grid-area name, row-start / column-start / row-end / column-end Shorthand for all positioning

Grid Alignment

Aligning Grid Items

CSS Grid provides powerful alignment properties for both the grid container and grid items.

/* Container alignment */
.grid {
    display: grid;
    justify-items: center;     /* Align items horizontally */
    align-items: center;       /* Align items vertically */
    justify-content: center;   /* Align grid horizontally */
    align-content: center;     /* Align grid vertically */
}

/* Individual item alignment */
.grid-item {
    justify-self: start;       /* Align item horizontally */
    align-self: end;          /* Align item vertically */
}

/* Alignment values */
/* start, end, center, stretch */
/* space-around, space-between, space-evenly */

Alignment Examples

Center Alignment
Center
Center
Center
Mixed Alignment
Start
Center
End

CSS Grid Best Practices

Grid Layout Guidelines

  • Use Grid for page layouts: CSS Grid is perfect for overall page structure
  • Combine with Flexbox: Use Flexbox for components within grid areas
  • Plan your layout: Sketch out your grid structure before coding
  • Use meaningful names: Name grid areas descriptively
  • Consider accessibility: Ensure logical tab order and screen reader support
  • Test responsiveness: Verify layouts work on all screen sizes
  • Use auto-fit/auto-fill: Create responsive grids automatically
  • Minimize nesting: Avoid deeply nested grids when possible

Responsive Grid Pattern

/* Mobile-first responsive grid */
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

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

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

/* Large screens */
@media (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
Back to Advanced CSS Next: CSS Flexbox