📱
Mobile: 1 Column
Stacked Vertically
On phones (below 768px), cards stack one after another. Easy to
scroll with your thumb.
📟
Tablet: 2 Columns
Side by Side
On tablets (768px to 1023px), cards arrange in 2 columns. Uses
screen space efficiently.
💻
Desktop: 3 Columns
Full Grid
On desktops (1024px and above), cards arrange in 3 columns. Maximum
information density.
🔄
Same HTML
One Code, Three Layouts
The HTML never changes. CSS media queries handle everything.
📏
Breakpoints
768px and 1024px
Two media queries create three distinct layouts.
🎯
Mobile-First
Start Small, Go Big
Default is mobile. Add with min-width for larger screens.
📚 Theory: Three Layouts, One HTML
What Are Breakpoints?
A breakpoint is a specific screen width where your
design changes. For example, at 768px, a layout might switch from 1
column to 2 columns.
Common Breakpoints in Industry
-
320px - 480px: Small phones (iPhone SE, Galaxy
Fold)
-
481px - 768px: Large phones / small tablets
(iPhone Plus, iPad Mini)
- 769px - 1024px: Tablets (iPad, Surface Go)
-
1025px - 1200px: Desktops (standard laptop
screens)
-
1201px+: Large desktops (external monitors, 4K
screens)
How Netflix Uses Breakpoints
-
Mobile (under 600px): 1 column of thumbnails,
bottom navigation
-
Tablet (600px - 950px): 2-3 columns, top
navigation appears
-
Desktop (950px+): 4-5 columns, full hover
effects, side navigation
Netflix doesn't guess how many columns to show. They explicitly set
breakpoints for each device size.
Mobile-First Media Queries
Notice we use min-width, not max-width:
/* MOBILE FIRST PATTERN */ /* 1. Start with mobile styles (no media
query) */ .cards { display: flex; flex-direction: column; /* 1 column
on mobile */ } /* 2. Tablet styles (apply from 768px and up) */ @media
(min-width: 768px) { .cards { display: grid; grid-template-columns:
repeat(2, 1fr); /* 2 columns on tablet */ } } /* 3. Desktop styles
(apply from 1024px and up) */ @media (min-width: 1024px) { .cards {
grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */ } }
Why min-width?
min-width means "apply these styles when the screen is AT
LEAST this wide." This matches the mobile-first philosophy: start with
mobile, then add features as the screen gets larger.
What About max-width?
max-width means "apply these styles when the screen is AT
MOST this wide." This is "desktop-first" — you start with desktop,
then remove features for mobile. Most modern developers use
min-width (mobile-first).
Can You Combine Both?
Yes. For example, if you want styles that ONLY apply to tablets (not
mobile, not desktop):
@media (min-width: 768px) and (max-width: 1023px) { /* Tablet-only
styles */ /* These only apply between 768px and 1023px */ }
The Three Layouts in This Project
-
Layout 1 (Mobile):
flex-direction: column — cards stack vertically
-
Layout 2 (Tablet):
grid-template-columns: repeat(2, 1fr) — 2 columns
-
Layout 3 (Desktop):
grid-template-columns: repeat(3, 1fr) — 3 columns
Why Not Just Use auto-fit?
repeat(auto-fit, minmax(300px, 1fr)) automatically
decides how many columns to show. That's great for many cases. But
sometimes you need explicit control:
-
You want EXACTLY 2 columns on tablet, not sometimes 2, sometimes 3
-
You want a completely different layout structure (not just column
count)
-
You want to rearrange elements (move sidebar from bottom to side)
Media queries give you exact control. Auto-fit gives the browser
control. Both are useful tools.
📝 The Complete CSS Pattern
/* =================================== STEP 1: MOBILE (default)
=================================== */ .your-class { display: flex;
flex-direction: column; gap: 20px; } /*
=================================== STEP 2: TABLET (768px and up)
=================================== */ @media (min-width: 768px) {
.your-class { display: grid; grid-template-columns: repeat(2, 1fr);
gap: 25px; } } /* =================================== STEP 3: DESKTOP
(1024px and up) =================================== */ @media
(min-width: 1024px) { .your-class { grid-template-columns: repeat(3,
1fr); } }