Chapter 3: CSS Flexbox & Grid

Master modern CSS layout systems — arrange elements in rows, columns, and grids with ease.

Flexbox Basics

Flex Properties

CSS Grid

Responsive

Quiz

Flexbox Basics

Flexbox is like arranging books on a shelf. You choose the shelf direction (left-to-right or top-to-bottom), then decide how to space the books out — push them to the left, center them, or spread them evenly across the shelf.

Flexbox works with two concepts:

Flex container — the parent element with display: flex
Flex items — the direct children inside the container

HTML — Flexbox: justify-content & align-items

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }

    .flex-container {
        display: flex;               /* This activates Flexbox! */
        justify-content: center;     /* Horizontal alignment */
        align-items: center;         /* Vertical alignment */
        gap: 12px;                   /* Space between items */
        height: 150px;
        background: #dfe6e9;
        border-radius: 8px;
        margin: 10px 0;
        border: 2px dashed #b2bec3;
    }

    .flex-item {
        padding: 16px 24px;
        background: #6c5ce7;
        color: white;
        border-radius: 8px;
        font-weight: bold;
    }

    h3 { color: #2d3436; margin: 16px 0 4px; }
    .label { color: #636e72; font-size: 13px; margin-bottom: 6px; }
</style>

<h3>justify-content: center (horizontal center)</h3>
<div class="flex-container" style="justify-content: center;">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
</div>

<h3>justify-content: space-between</h3>
<div class="flex-container" style="justify-content: space-between;">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
</div>

<h3>justify-content: space-around</h3>
<div class="flex-container" style="justify-content: space-around;">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
    <div class="flex-item">C</div>
</div>

<!-- TRY: Change justify-content to "flex-start", "flex-end", or "space-evenly" -->

Property	What It Does	Common Values
`justify-content`	Horizontal alignment	flex-start, center, flex-end, space-between, space-around, space-evenly
`align-items`	Vertical alignment	flex-start, center, flex-end, stretch, baseline
`flex-direction`	Direction of items	row (default), column, row-reverse, column-reverse
`gap`	Space between items	10px, 1rem, etc.

Flex Item Properties

Beyond the container, each flex item can control its own behavior with properties like flex-grow, flex-shrink, and flex-wrap.

HTML — flex-grow, flex-wrap, and flex-direction

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    h3 { color: #2d3436; margin: 16px 0 6px; }

    .flex-box {
        display: flex;
        gap: 10px;
        background: #dfe6e9;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .item {
        padding: 14px 20px;
        background: #6c5ce7;
        color: white;
        border-radius: 6px;
        font-weight: bold;
        text-align: center;
    }
</style>

<h3>flex-grow: items expand to fill space</h3>
<div class="flex-box">
    <div class="item" style="flex-grow: 1;">Grow 1</div>
    <div class="item" style="flex-grow: 2;">Grow 2 (2x wider)</div>
    <div class="item" style="flex-grow: 1;">Grow 1</div>
</div>

<h3>flex-wrap: items wrap to next line</h3>
<div class="flex-box" style="flex-wrap: wrap;">
    <div class="item" style="min-width: 150px;">Item 1</div>
    <div class="item" style="min-width: 150px;">Item 2</div>
    <div class="item" style="min-width: 150px;">Item 3</div>
    <div class="item" style="min-width: 150px;">Item 4</div>
    <div class="item" style="min-width: 150px;">Item 5</div>
</div>

<h3>flex-direction: column (vertical stack)</h3>
<div class="flex-box" style="flex-direction: column; align-items: flex-start;">
    <div class="item">Top</div>
    <div class="item">Middle</div>
    <div class="item">Bottom</div>
</div>

<!-- TRY: Change flex-grow values, add more items to see wrapping -->

The shorthand flex: 1 is the same as flex-grow: 1; flex-shrink: 1; flex-basis: 0. It tells an item to take up an equal share of available space. It's the most commonly used flex shorthand!

CSS Grid

If Flexbox is a bookshelf (one-dimensional, items in a row or column), CSS Grid is a spreadsheet (two-dimensional, items in rows AND columns at the same time). Use Flexbox for simple rows/columns, and Grid for complex layouts.

HTML — CSS Grid Layout

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    h3 { color: #2d3436; margin: 16px 0 6px; }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
        gap: 12px;
        background: #dfe6e9;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .grid-item {
        padding: 20px;
        background: #6c5ce7;
        color: white;
        border-radius: 6px;
        font-weight: bold;
        text-align: center;
    }

    /* A more complex grid layout */
    .page-layout {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 60px 1fr 50px;
        gap: 8px;
        height: 300px;
    }

    .header  { grid-column: 1 / 3; background: #2d3436; color: white; }
    .sidebar { background: #636e72; color: white; }
    .content { background: #dfe6e9; color: #2d3436; }
    .footer  { grid-column: 1 / 3; background: #2d3436; color: white; }

    .page-layout div {
        padding: 12px;
        border-radius: 6px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<h3>Basic Grid: 3 Equal Columns</h3>
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

<h3>Page Layout with Grid</h3>
<div class="page-layout">
    <div class="header">Header (spans 2 columns)</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
    <div class="footer">Footer (spans 2 columns)</div>
</div>

<!-- TRY: Change grid-template-columns to "1fr 2fr 1fr" for different widths -->

Grid Property	What It Does	Example
`grid-template-columns`	Defines column sizes	`1fr 1fr 1fr` (3 equal)
`grid-template-rows`	Defines row sizes	`60px 1fr 50px`
`grid-column`	Span columns	`1 / 3` (spans 2 cols)
`gap`	Space between cells	`12px`
`fr`	Fraction of free space	`2fr` = twice as wide

Responsive Design with Media Queries

Media queries are like a wardrobe for different weather. You wear shorts in summer and a coat in winter. Similarly, your website wears different styles depending on the screen size — big layouts on desktops, stacked layouts on phones.

HTML — Responsive Media Queries

<style>
    body { font-family: Arial, sans-serif; padding: 20px; }

    .responsive-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  /* 3 columns on wide screens */
        gap: 16px;
    }

    .card {
        padding: 20px;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
    }
    .card:nth-child(1) { background: #6c5ce7; color: white; }
    .card:nth-child(2) { background: #00b894; color: white; }
    .card:nth-child(3) { background: #e74c3c; color: white; }

    .size-indicator {
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 16px;
        background: #0984e3;
        color: white;
    }

    /* MEDIUM screens (tablets): 2 columns */
    @media (max-width: 600px) {
        .responsive-grid {
            grid-template-columns: 1fr 1fr;
        }
        .size-indicator { background: #fdcb6e; color: #2d3436; }
        .size-indicator::after { content: " (Medium: 2 columns)"; }
    }

    /* SMALL screens (phones): 1 column */
    @media (max-width: 400px) {
        .responsive-grid {
            grid-template-columns: 1fr;
        }
        .size-indicator { background: #e74c3c; color: white; }
        .size-indicator::after { content: " (Small: 1 column)"; }
    }
</style>

<div class="size-indicator">Resize the preview to see changes!</div>

<div class="responsive-grid">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

<p style="margin-top:20px; color: #636e72; font-size:14px;">
    <strong>How to test:</strong> Drag the bottom-right corner of this preview
    to resize it, or open in a new tab and resize your browser window.
</p>

<!-- TRY: Add a 4th card and change breakpoints -->

Always design mobile-first! Start with styles for small screens, then use @media (min-width: ...) to add layout for larger screens. This approach makes responsive design much easier.

🎯 Challenge!

Add a 4th card to the grid
Change the large-screen layout to 4 columns: grid-template-columns: 1fr 1fr 1fr 1fr
Add a breakpoint at 500px for 2 columns

📝 Chapter 3 Quiz

1. What CSS property activates Flexbox on a container?

flex: 1

position: flex

display: flex

flexbox: true

2. Which property distributes items with equal space BETWEEN them?

align-items: space-between

justify-content: space-between

gap: space-between

flex-wrap: space-between

3. How do you create 3 equal columns with CSS Grid?

grid-template-columns: 1fr 1fr 1fr

grid-columns: 3

columns: 3 equal

display: grid-3

4. Which syntax is correct for a media query?

@screen (max-width: 768px) { }

@responsive (768px) { }

@breakpoint 768px { }

@media (max-width: 768px) { }

5. What is the key difference between Flexbox and Grid?

Flexbox is newer than Grid

Grid cannot center items

Flexbox is 1D (row or column), Grid is 2D (rows and columns)

They are identical, just different syntax

← Chapter 2: CSS Chapter 4: JavaScript →