NexusBerry Modern Frontend Course

Lecture 4

Flexbox & CSS Grid Mastery

By Rana M. Ajmal | February 2026

Export PDF | Open in Browser

Today's Agenda

Flexbox Deep Dive — One-Dimensional Layouts
Flex Items — Sizing & Distribution
CSS Grid — Two-Dimensional Layouts
Building the Modern Dashboard

💎 Your business card from Lecture 3 is about to get neighbors. Welcome to layout.

Part 1

Flexbox Deep Dive

One-Dimensional Layouts

Analogy: Items on a shelf — one direction at a time

flex-direction: Row vs Column

→ Row (default)

Items flow left to right

Main axis: horizontal

Cross axis: vertical

flex-direction: row;

↓ Column

Items flow top to bottom

Main axis: vertical

Cross axis: horizontal

flex-direction: column;

⚡ justify-content works along the main axis. align-items works along the cross axis.

Flexbox Mental Model

🏗 Parent Container

→

🔨 display: flex Activate

→

↔ justify-content Main axis

→

↕ align-items Cross axis

→

✅ gap Spacing

⚠ display: flex only affects direct children — not grandchildren!

justify-content Values

◀▶ flex-start Pack to the start (default)

▶◀ flex-end Pack to the end

▶■◀ center Center items

|• •| space-between Items at edges, equal gaps

• • space-around Equal space around each

—•—•— space-evenly Equal space everywhere

Flex Container Properties

Property	What It Controls	Common Value
`display: flex`	Activate Flexbox	`flex`
`flex-direction`	Main axis direction	`row` / `column`
`flex-wrap`	Allow wrapping	`nowrap` / `wrap`
`justify-content`	Main axis alignment	`space-between`
`align-items`	Cross axis alignment	`center`
`gap`	Space between items	`16px`

💻 Let's see this in code!

Switch to VS Code — building a Flexbox navigation bar

🤔 Predict the Output


.container {
    display: flex;
    flex-direction: column;
}

What happens to the child elements?

They stay in a row (left to right)
They stack vertically (top to bottom) ✅
They overlap on top of each other
They disappear

flex-direction: column changes the main axis from horizontal to vertical.

🤔 Concept Check

Difference between space-between and space-around?

No difference — they're aliases
space-between: no edge space. space-around: equal space around each ✅
space-between only works with 2 items
space-around centers everything

⚡ space-between pushes first/last to edges. space-around gives each item equal space on both sides.

🔎 Spot the Error


.container {
    display: flex;
    align-items: space-between;
}

space-between is NOT valid for align-items!

❌ align-items accepts: stretch, flex-start, flex-end, center, baseline. The space-* values only work with justify-content.

Part 1 Summary

Key Concept: Flexbox = one-dimensional layout (row OR column)
Common Mistake: Applying flex properties to children instead of the container
Best Practice: Use gap instead of margins between flex items

💎 The shift from floats to Flexbox was the single biggest quality-of-life improvement in CSS history.

Part 2

Flex Items

Sizing & Distribution

Analogy: flex-grow = dividing pizza slices 🍕

flex-grow: Space Distribution

flex-grow: 1 | flex-grow: 2 | flex-grow: 1 — ratio 1:2:1

Item A (flex-grow: 1) 25%

Item B (flex-grow: 2) 50%

Item C (flex-grow: 1) 25%

Total grow = 1+2+1 = 4 parts. Each item gets its share of extra space.

The `flex: 1` Shorthand


flex: 1;

/* Expands to: */
flex-grow:   1;
flex-shrink: 1;
flex-basis:  0%;

Shorthand property Grow & shrink equally Start from 0 (ignore content size)

💎 flex: 1 handles 90% of your Flexbox needs. Master this one shorthand.

flex-basis: auto vs 0

flex-basis: auto

Starts from content size

Wider content = wider item

Default behavior

flex: 1 1 auto;

flex-basis: 0%

Ignores content size

All items equal width

What flex: 1 uses

flex: 1; /* = 1 1 0% */

Flex Item Properties

Property	What It Does	Default
`flex-grow`	How much item grows	`0`
`flex-shrink`	How much item shrinks	`1`
`flex-basis`	Starting size	`auto`
`flex`	Shorthand (grow shrink basis)	—
`align-self`	Override parent's align-items	`auto`
`order`	Visual order (without changing HTML)	`0`

💻 Let's see this in code!

Switch to VS Code — building equal-width cards with a featured card

🤔 Predict the Output


.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }
.item-c { flex-grow: 1; }
/* 400px extra space to distribute */

How is the extra space distributed?

Each gets 133px extra
A: 100px, B: 200px, C: 100px ✅
B gets all 400px
Space is distributed equally

Total grow = 4. A gets 1/4 (100px), B gets 2/4 (200px), C gets 1/4 (100px).

⚡ Quick-Fire

What does flex: 1 expand to?

flex-grow: 1; flex-shrink: 0; flex-basis: auto;
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; ✅
flex-grow: 1; (nothing else)
flex: 100%;

The 0% basis is key — items ignore content size and share space equally.

🤔 Concept Check

5 cards in a row squish too much on small screens. How to make them wrap?

flex-direction: wrap;
flex-wrap: wrap; ✅
display: flex-wrap;
overflow: wrap;

⚡ flex-wrap: wrap allows items to flow to the next line. Essential for responsive layouts!

Part 2 Summary

flex: 1 = equal-width items (the 90% shorthand)
flex-grow distributes extra space proportionally
flex-wrap: wrap makes flex layouts responsive

💎 Don't set fixed widths AND flex-grow on the same item — they conflict. Use flex: 1 instead.

Part 3

CSS Grid

Two-Dimensional Layouts

Analogy: Grid = spreadsheet — rows AND columns

Flexbox vs Grid

↔ Flexbox (1D)

Row OR column

Content-driven layout

Items decide the flow

Best for components

▦ Grid (2D)

Rows AND columns

Layout-driven design

YOU define the grid

Best for page layout

⚡ Flexbox: items decide layout. Grid: YOU define the layout. Different mindsets!

Defining Grid Columns


display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 16px;

Grid properties Activate Grid 1 fraction each 2 fractions (double)

On 800px: 1fr = 200px, 2fr = 400px, 1fr = 200px (total 4 fr parts)

Grid Concepts

📈 Tracks Rows and columns of the grid

▦ Cells Individual grid spaces

📏 Lines Numbered borders between tracks

🗺 Areas Named regions spanning cells

⚡ fr = fraction of remaining space. Only works inside grid-template-columns/rows.

Defining a Grid: Step by Step

1️⃣ display: grid

↓

2️⃣ grid-template-columns

↓

3️⃣ grid-template-rows (optional)

↓

4️⃣ gap

↓

5️⃣ Place items (grid-column)

Spanning Columns & Rows

Code	What It Does
`grid-column: 1 / 3`	Span from line 1 to line 3 (2 columns)
`grid-column: 1 / -1`	Span from first to last line (full width)
`grid-column: span 2`	Span 2 columns from current position
`grid-row: 1 / 3`	Span from row line 1 to 3 (2 rows)

⚡ -1 means “the last line.” grid-column: 1 / -1 = full width regardless of column count.

The Magic Responsive Pattern


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

💻 Wide 4 columns

→

💻 Medium 3 columns

→

📱 Tablet 2 columns

→

📱 Mobile 1 column

💎 One line replaces 30+ lines of media queries. This is the Grid one-liner I use in every project.

💻 Let's see this in code!

Switch to VS Code — building grid layouts & the magic pattern

🤔 Predict the Output


.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* Container: 800px, gap: 0 */
}

How wide is each column?

266px, 266px, 266px
200px, 400px, 200px ✅
100px, 600px, 100px
250px, 300px, 250px

Total = 4fr. 800 ÷ 4 = 200px per fr. Columns: 200 | 400 | 200.

🤔 Concept Check

What does grid-column: 1 / -1 mean?

Invalid — negative values don't work
Span from first to last column line (full width) ✅
The item is 1px wide with -1px margin
Columns are reversed

-1 = the last grid line. Works regardless of how many columns you have.

💡 Hidden Fact Reveal


grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Responsive grid — no media queries needed!

Resize the browser: 4 cols → 3 → 2 → 1 — automatically.

💎 This single line is the most useful CSS Grid pattern. Memorize it. Use it everywhere.

Part 3 Summary

CSS Grid = two-dimensional layout (rows AND columns)
fr unit = fraction of remaining space
auto-fit + minmax = responsive without media queries

⚡ Use DevTools Grid inspector to visualize grid lines, track sizes, and areas.

Part 4

Building the Modern Dashboard

Grid for the big picture, Flexbox for the details

When to Use Which?

↔ Use Flexbox

• Navigation bars

• Button groups

• Card internals

• Centering elements

Component-level (micro)

▦ Use Grid

• Page layouts

• Card grids

• Dashboard structure

• Complex 2D layouts

Page-level (macro)

💎 Best developers use BOTH. Grid for the structure, Flexbox for the components inside.

Dashboard Build Steps

▦ Grid Skeleton Page layout

→

↔ Header Flex Logo + nav

→

↕ Sidebar Flex Vertical nav

→

📈 Stats Grid 4 cards

→

✅ Content Data table

Dashboard Grid Structure

Header grid-column: 1 / -1

Sidebar
250px

Main Content (1fr)

Stat

Footer (grid-column: 1 / -1)

💻 Let's build the dashboard!

Switch to VS Code — combining Grid & Flexbox

🤔 Concept Check

4 cards per row on desktop, 1 per row on mobile. Best approach?

Flexbox with media queries
Grid with repeat(auto-fit, minmax(250px, 1fr))
Both work, but Grid is cleaner for this case ✅
Use a table

Grid gives you cleaner 2D control with one line. Flexbox needs more setup.

🔎 Spot the Error


.dashboard {
    display: grid;
    display: flex;
}

NOT a syntax error — but a likely copy-paste mistake!

⚠ The second display overrides the first. The element becomes flex, not grid. Did you mean to do that?

⚡ Quick-Fire: Match the Tool

Layout Need	Tool
Nav bar (logo + links)	Flexbox
Page with header, sidebar, main, footer	Grid
Centering one element	Both!
Auto-wrapping card grid	Grid (auto-fit + minmax)

Part 4 Summary

Grid for page structure (macro layout)
Flexbox for component internals (micro layout)
Combine both — they're designed to work together

💎 Every professional codebase uses BOTH Grid and Flexbox. Know when to reach for which tool.

Cheat Sheet

Flexbox Properties

Container	Common Value
`display: flex`	Activate Flexbox
`flex-direction`	`row` / `column`
`justify-content`	`space-between` / `center`
`align-items`	`center` / `stretch`
`gap`	`16px`

Flex item shorthand: flex: 1 = grow: 1, shrink: 1, basis: 0%

Grid & Decision Guide

Grid Property	Example
`display: grid`	Activate Grid
`grid-template-columns`	`250px 1fr`
`grid-column: 1 / -1`	Full-width spanning

Magic pattern: repeat(auto-fit, minmax(250px, 1fr))

Need	Tool
Nav bar, button group	Flexbox
Page layout, card grid	Grid

Full cheat sheet shared after class

Home Assignment

Interactive Team Directory Layout

Build a team directory page using both Grid and Flexbox
Grid page layout (header, main, footer spanning full width)
Flexbox navigation bar (logo + links, space-between)
Team cards using repeat(auto-fit, minmax(...))
At least one card spanning 2 columns
Include one creative addition beyond class demo

Due: Before Lecture 5 | Submit via Google Classroom

Total: 100 points | See assignment.md for full rubric

Questions?

Next Lecture: Advanced CSS & Responsive Design

Media queries, mobile-first strategy, responsive units

NexusBerry Training and Solutions

www.nexusberry.com | admin@nexusberry.com
WhatsApp: 0328-4500073

Lecture 4

Flexbox & CSS Grid Mastery

Today's Agenda

Flexbox Deep Dive

One-Dimensional Layouts

flex-direction: Row vs Column

→ Row (default)

↓ Column

Flexbox Mental Model

justify-content Values

Flex Container Properties

🤔 Predict the Output

🤔 Concept Check

🔎 Spot the Error

Part 1 Summary

Flex Items

Sizing & Distribution

flex-grow: Space Distribution

The flex: 1 Shorthand

flex-basis: auto vs 0

flex-basis: auto

flex-basis: 0%

Flex Item Properties

🤔 Predict the Output

⚡ Quick-Fire

🤔 Concept Check

Part 2 Summary

CSS Grid

Two-Dimensional Layouts

Flexbox vs Grid

↔ Flexbox (1D)

▦ Grid (2D)

Defining Grid Columns

Grid Concepts

Defining a Grid: Step by Step

Spanning Columns & Rows

The Magic Responsive Pattern

🤔 Predict the Output

🤔 Concept Check

💡 Hidden Fact Reveal

Part 3 Summary

Building the Modern Dashboard

When to Use Which?

↔ Use Flexbox

▦ Use Grid

Dashboard Build Steps

Dashboard Grid Structure

🤔 Concept Check

🔎 Spot the Error

⚡ Quick-Fire: Match the Tool

Part 4 Summary

Cheat Sheet

Flexbox Properties

Grid & Decision Guide

Home Assignment

Interactive Team Directory Layout

Questions?

The `flex: 1` Shorthand