Session 1.8 – CSS Grid Layout

Introduction

CSS Grid Layout is a two-dimensional layout system that revolutionizes how we create web layouts. Unlike Flexbox (which is one-dimensional), Grid allows you to work with rows and columns simultaneously, making it perfect for complex page layouts.

Key Insight

CSS Grid is the most powerful layout system available in CSS. It enables you to create complex responsive layouts with clean, maintainable code, eliminating the need for floats, positioning hacks, and clearfix solutions.

Why Use CSS Grid?

Two-dimensional control: Manage both rows and columns simultaneously
Simplified markup: Less nested HTML structure needed
Responsive design: Built-in features for creating adaptive layouts
Alignment control: Precise positioning of items
Overlap support: Items can overlap when needed

Grid Basics

A grid consists of a grid container (parent) and grid items (children). You create a grid by setting display: grid on the container.

Creating Your First Grid

/* HTML */
<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

/* CSS */
.grid-container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3 columns */
    grid-template-rows: 100px 100px;           /* 2 rows */
    gap: 10px;                                  /* Space between items */
}
                    

Visual Example: Basic Grid

1

2

3

4

5

6

Grid Terminology

Grid Container: The element with display: grid
Grid Items: Direct children of the grid container
Grid Lines: The dividing lines that create the grid structure
Grid Tracks: Space between two grid lines (rows or columns)
Grid Cell: Single unit of the grid (intersection of row and column)
Grid Area: Rectangular space spanning one or more cells

Grid Container Properties

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

grid-template-columns & grid-template-rows

/* Fixed sizes */
grid-template-columns: 200px 300px 200px;

/* Fractional units (fr) - distributes available space */
grid-template-columns: 1fr 2fr 1fr;  /* Middle column twice as wide */

/* Auto - fits content */
grid-template-columns: auto 200px auto;

/* Repeat function */
grid-template-columns: repeat(3, 200px);      /* 200px 200px 200px */
grid-template-columns: repeat(4, 1fr);        /* Equal 4 columns */
grid-template-columns: repeat(auto-fill, 200px);  /* Responsive */

/* Mixing units */
grid-template-columns: 200px 1fr 2fr 200px;

/* minmax() function */
grid-template-columns: minmax(200px, 1fr) 2fr;
                    

Gap (Gutters)

/* Both row and column gaps */
gap: 20px;

/* Separate row and column gaps */
gap: 20px 30px;  /* row-gap column-gap */

/* Individual properties */
row-gap: 20px;
column-gap: 30px;

/* Old syntax (still supported) */
grid-gap: 20px;
grid-row-gap: 20px;
grid-column-gap: 30px;
                    

Grid Auto Flow

/* Control how auto-placed items flow */
grid-auto-flow: row;        /* Default - fill rows */
grid-auto-flow: column;     /* Fill columns */
grid-auto-flow: dense;      /* Fill gaps (may change order) */
                    

Justify and Align Content

/* Align entire grid within container */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

/* Shorthand */
place-content: center;  /* centers both axes */
                    

Visual Examples

Equal Columns (1fr each)

1fr

Mixed Sizes (1fr 2fr 1fr)

1fr

2fr

1fr

Grid Item Properties

These properties are applied to grid items to control their placement and size.

Grid Column & Row Placement

/* Span specific grid lines */
.item {
    grid-column-start: 1;
    grid-column-end: 3;    /* Spans from line 1 to 3 */
    grid-row-start: 1;
    grid-row-end: 2;
}

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

/* Span keyword */
.item {
    grid-column: 1 / span 2;   /* Start at 1, span 2 columns */
    grid-row: span 2;           /* Span 2 rows from current position */
}

/* Named lines */
.item {
    grid-column: start / end;
}
                    

Grid Area Shorthand

/* grid-area: row-start / column-start / row-end / column-end */
.item {
    grid-area: 1 / 1 / 3 / 3;  /* Spans rows 1-3, columns 1-3 */
}

/* Or reference named area */
.item {
    grid-area: header;
}
                    

Justify and Align Individual Items

/* Align item within its cell */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

/* Shorthand */
place-self: center;  /* centers in both directions */
                    

Visual Example: Item Placement

Spans 2 columns

Regular

Spans 2 rows

5

6

Spans 2 columns

9

Grid Template Areas

Grid template areas provide an intuitive way to define layouts using named areas.

Defining Template Areas

.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";
    gap: 10px;
    min-height: 100vh;
}

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

Visual Representation

Header

Sidebar

Main Content

Aside

Footer

Empty Cells

/* Use dots (.) for empty cells */
.grid-container {
    grid-template-areas:
        "header header header"
        "sidebar content ."      /* Empty cell in top-right */
        "footer footer footer";
}
                    

Template Areas Benefits

Visual representation of layout in CSS
Easy to understand and maintain
Simple to reorganize layouts
Great for responsive design with media queries

Responsive Grid Layouts

CSS Grid makes creating responsive layouts straightforward with features like auto-fill, auto-fit, and media queries.

Auto-Fill and Auto-Fit

/* Auto-fill: Creates as many tracks as fit, even if empty */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Auto-fit: Collapses empty tracks */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
                    

Responsive with Media Queries

/* Mobile-first approach */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "content"
        "sidebar"
        "footer";
    gap: 10px;
}

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

/* Desktop */
@media (min-width: 1024px) {
    .grid-container {
        grid-template-columns: 200px 1fr 200px;
        grid-template-areas:
            "header header  header"
            "sidebar content aside"
            "footer footer  footer";
    }
}
                    

Responsive Card Grid

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

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

Card 1

Card 2

Card 3

Card 4

Practical Examples

Example 1: Holy Grail Layout

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header header"
                "nav    main   aside"
                "footer footer footer";
        }

        header { grid-area: header; background: #333; color: white; padding: 20px; }
        nav    { grid-area: nav; background: #f4f4f4; padding: 20px; }
        main   { grid-area: main; padding: 20px; }
        aside  { grid-area: aside; background: #f4f4f4; padding: 20px; }
        footer { grid-area: footer; background: #333; color: white; padding: 20px; }

        @media (max-width: 768px) {
            body {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "nav"
                    "main"
                    "aside"
                    "footer";
            }
        }
    </style>
</head>
<body>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</body>
</html>
                    

Example 2: Photo Gallery

<style>
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: 250px;
        gap: 15px;
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

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

    .gallery-item:hover img {
        transform: scale(1.1);
    }

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

<div class="gallery">
    <div class="gallery-item"><img src="photo1.jpg"></div>
    <div class="gallery-item large"><img src="photo2.jpg"></div>
    <div class="gallery-item"><img src="photo3.jpg"></div>
    <!-- More items -->
</div>
                    

Example 3: Dashboard Layout

<style>
    .dashboard {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 20px;
        padding: 20px;
    }

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

    .widget-large { grid-column: span 2; }
    .widget-tall { grid-row: span 2; }
    .widget-wide-tall {
        grid-column: span 2;
        grid-row: span 2;
    }

    @media (max-width: 768px) {
        .dashboard {
            grid-template-columns: 1fr;
        }
        .widget-large,
        .widget-tall,
        .widget-wide-tall {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
</style>

<div class="dashboard">
    <div class="widget widget-wide-tall">Main Chart</div>
    <div class="widget">Stat 1</div>
    <div class="widget">Stat 2</div>
    <div class="widget widget-large">Recent Activity</div>
    <div class="widget">Quick Actions</div>
</div>
                    

Session Summary

Key Points

CSS Grid: Two-dimensional layout system for rows and columns
Container Properties: grid-template-columns/rows, gap, justify/align-content
Item Properties: grid-column/row, grid-area, justify/align-self
Fractional Units (fr): Distribute available space proportionally
Template Areas: Named areas for intuitive layout design
Responsive: auto-fill, auto-fit, and media queries for adaptive layouts
minmax(): Define minimum and maximum sizes for flexible grids

Best Practices

Use fr units for flexible, proportional layouts
Combine repeat() with auto-fit for responsive grids
Use template areas for complex layouts - easier to visualize and maintain
Apply gap instead of margins for consistent spacing
Use minmax() for responsive column sizing without media queries
Grid and Flexbox complement each other - use both when appropriate

Next Module Preview

In Module 2, we'll dive into JavaScript programming, learning how to add interactivity and dynamic behavior to web pages. We'll start with JavaScript basics including variables, operators, and control structures.