CSS Grid and Flexbox Tutorial: Master Modern CSS Layouts 2026
CSS Grid aur Flexbox modern web layout ki foundations hain. Yeh complete tutorial aapko dono ko practically seekhayega — har concept with working code examples jo aap apne projects mein use kar sakte ho.
CSS Flexbox Tutorial: 1-Dimensional Layouts
Flexbox ek-dimensional layout system hai jo items ko horizontally ya vertically align aur distribute karta hai. Yeh tab best hai jab aapko ek direction mein items arrange karne hain.
Flex Container Setup
Flex container banana:
.container {
display: flex;
flex-direction: row; (default), column, row-reverse, column-reverse
flex-wrap: wrap; nowrap (default), wrap, wrap-reverse
justify-content: space-between; Main axis alignment (horizontal if direction is row)
align-items: center; Cross axis alignment (vertical if direction is row)
gap: 20px; Gap between items
}
Flex items:
.item {
flex-grow: 1; how much space item can take (default: 0)
flex-shrink: 0; how much item can shrink (default: 1)
flex-basis: 300px; initial size before growing/shrinking
flex: 1 0 300px; Short hand: flex: grow shrink basis
}
Flexbox Justify Content Options
.container {
display: flex;
justify-content:
flex-start (Items at start - default)
flex-end (Items at end)
center (Items centered)
space-between (Equal space between items)
space-around (Equal space around items)
space-evenly (Equal space everywhere)
}
Flexbox Align Items
.container {
display: flex;
align-items:
stretch (Fill container height - default)
flex-start (Items at top)
flex-end (Items at bottom)
center (Items vertically centered)
baseline (Items aligned by text baseline)
}
Flex Direction Variations
Row (default) - horizontal layout:
.row-layout { display: flex; flex-direction: row; }
Column - vertical layout:
.column-layout { display: flex; flex-direction: column; }
Row reversed - horizontal but reversed:
.row-reversed { display: flex; flex-direction: row-reverse; }
Real-World Flexbox Layout Example
Navbar with Flexbox:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
background: #0a0a1a;
color: #e8f4fd;
position: sticky;
top: 0;
z-index: 100;
}
.nav-links {
display: flex;
gap: 24px;
list-style: none;
}
.nav-links a {
color: rgba(232, 244, 253, 0.80);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: #00e5ff;
}
Hero section:
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 40px;
min-height: 80vh;
}
Card grid with flex-wrap:
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 40px;
}
.card {
flex: 1 1 300px; /* Grow, shrink, basis */
max-width: 400px;
padding: 32px;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
}
CSS Grid Tutorial: 2-Dimensional Layouts
CSS Grid 2-dimensional layout system hai jo rows aur columns dono mein items arrange karta hai. Complex layouts ke liye yeh perfect hai.
Grid Container Setup
Grid container banana:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); 3 equal columns
grid-template-columns: 200px 1fr 200px; Left sidebar, main, right sidebar
grid-template-columns: minmax(250px, 1fr) 2fr; Responsive columns
grid-template-rows: auto 1fr auto; Auto header, flexible content, footer
gap: 24px;
grid-auto-flow: row; or column
}
Grid Track Sizing with fr Unit
fr = fraction of available space:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; 25% 50% 25%
grid-template-columns: 2fr 1fr 1fr; 50% 25% 25%
grid-template-columns: repeat(4, 1fr); 4 equal columns
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); Auto responsive
}
Grid Gap (Spacing)
grid-row-gap: 20px;
grid-column-gap: 30px;
gap: 20px 30px; row-gap column-gap
gap: 24px; Same gap for both
Grid Line Positioning
.item {
grid-column: 1 / 3; Start at line 1, end at line 3
grid-column: 1 / -1; Start to end (full width)
grid-column: span 2; Span 2 columns
grid-row: 2 / 4; Start at line 2, end at line 4
grid-row: span 3; Span 3 rows
grid-area: 1 / 1 / 3 / 3; row-start / col-start / row-end / col-end
}
Real-World CSS Grid Layout Examples
Magazine Layout
.magazine-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 40px;
}
.featured { grid-column: 1 / -1; grid-row: 1 / 2; }
.article:nth-child(2) { grid-column: 1 / 2; }
.article:nth-child(3) { grid-column: 2 / 3; }
.article:nth-child(4) { grid-column: 3 / 4; }
Dashboard Layout
.dashboard {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr 60px;
height: 100vh;
gap: 0;
}
.sidebar { grid-row: 1 / -1; background: #0a0a1a; padding: 24px; }
.header { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.main-content { grid-column: 2 / -1; padding: 24px; overflow-y: auto; }
.footer { grid-column: 2 / -1; display: flex; align-items: center; justify-content: center; }
Photo Gallery Grid
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 24px;
}
.gallery-item {
aspect-ratio: 1; Square images
overflow: hidden;
border-radius: 12px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
Responsive Layouts with Grid + Flexbox
The Perfect Combination:
Grid for page structure:
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 0;
}
Flexbox for component internals:
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
padding: 24px;
}
.card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.card-content { flex: 1; display: flex; flex-direction: column; margin-top: 16px; }
.card-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 16px; }
Responsive Grid with Auto-Fill:
Automatically responsive without media queries:
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
With media queries when needed:
@media (max-width: 768px) {
.page-layout { grid-template-columns: 1fr; }
.dashboard { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
}
Grid Areas: Named Template Layouts
Using named grid areas:
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Responsive: switch to single column on mobile:
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
Common Layout Patterns
Holy Grail Layout (Header-Sidebar-Main-Footer)
.holy-grail {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-column: 1 / -1; }
.sidebar-left { grid-column: 1; }
.main-content { grid-column: 2; }
.sidebar-right { grid-column: 3; }
.footer { grid-column: 1 / -1; }
Card Grid Pattern
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0, 229, 255, 0.12);
}
.card-header { padding: 20px; border-bottom: 1px solid rgba(0, 229, 255, 0.08); }
.card-body { flex: 1; padding: 20px; }
.card-footer { padding: 16px 20px; border-top: 1px solid rgba(0, 229, 255, 0.08); }
Browser Support and Fallbacks
CSS Grid with Flexbox fallback:
.layout {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 250px 1fr;
}
}
Flexbox vs Grid: Kab Kya Use Karein
Scenario vs Best Choice:
- Navigation bar items: Flexbox
- Card grid (any number): Grid
- Center content: Flexbox
- Complex page layouts: Grid
- Form elements: Flexbox
- Image gallery: Grid
- Equal height columns: Grid
- Simple 1D alignment: Flexbox
Cyber Defence CSS Course
Cyber Defence mein CSS Grid aur Flexbox ka complete training available hai jo practical projects ke saath modern responsive layouts seekhata hai. Course design fundamentals se lekar advanced CSS techniques tak cover karta hai.
FAQs
Kya Flexbox aur Grid ek saath use kar sakte hain?
Haan, aksar best practice yehi hai. Grid page structure ke liye, Flexbox component-level alignment ke liye.
Kya CSS Grid se Flexbox ki jagah le sakta hai?
Partially. Grid 2D layouts ke liye better hai, Flexbox 1D alignment ke liye preferred hai.
Responsive design ke liye Media Queries zaroori hain?
Grid ke auto-fill/auto-fit feature bahut kaam handle kar sakte hain, but complex layouts ke liye media queries still zyada control dete hain.