Chapter 23: Layout Fundamentals
Layout Fundamentals
This is the most important bridge between “I can style single elements” and “I can build real, professional-looking websites that work beautifully on phone, tablet, and laptop”.
Layout = deciding where things go, how much space they take, how they behave when the screen size changes, and how they relate to each other.
In 2026, almost every modern layout is built using one (or a combination) of these four systems:
- Normal Flow (the browser’s default behavior — you must understand this first)
- Flexbox (the everyday hero for almost everything 1-dimensional)
- CSS Grid (the king for 2-dimensional / full-page layouts)
- Positioning (relative, absolute, fixed, sticky — used sparingly)
Let’s go very slowly, step by step, like I’m drawing on a whiteboard next to you.
1. Normal Flow – The Foundation You Can’t Skip
When you write plain HTML + very little CSS, the browser arranges everything using normal flow (also called block formatting context).
Key rules of normal flow:
| Display type (default) | Starts on new line? | Takes full available width? | Can have width & height set? | Typical elements |
|---|---|---|---|---|
| block | Yes | Yes | Yes | <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <ul>, <form> |
| inline | No | No (only as wide as content) | No (width/height ignored) | <span>, <a>, <strong>, <em>, <small> |
| inline-block | No | No | Yes | <img>, <button> (often manually set) |
Quick visual test (copy-paste this):
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="normal-flow"> <div class="block">Block 1 – full width, new line</div> <div class="block">Block 2 – stacks below</div> <span class="inline">Inline 1</span> <span class="inline">Inline 2</span> <span class="inline">Inline 3 – all stay in one line</span> <img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=80" alt="small image" class="inline-block-example"> <button class="inline-block-example">Button</button> </div> |
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.block { background: #dbeafe; padding: 20px; margin: 10px 0; border: 2px solid #3b82f6; } .inline { background: #fef3c7; padding: 8px 14px; } .inline-block-example { display: inline-block; margin: 0 8px 10px 0; vertical-align: middle; } |
→ Blocks stack vertically like paragraphs. → Inline elements flow like words in a sentence. → inline-block lets you give width/height/margin while keeping them in line.
Most common beginner confusion: “Why is there space between inline-block elements?” → Because there’s a real space character (line break or space) in the HTML between them. Fix = remove whitespace or use font-size:0 on parent + reset on children.
2. Flexbox – The 1D Layout King (Most Used in Real Projects)
Flexbox is perfect when you want to arrange items in one main direction (horizontal row OR vertical column) and want excellent control over:
- alignment
- spacing
- growing/shrinking
- wrapping
Parent (flex container) gets:
CSS
|
0 1 2 3 4 5 6 |
display: flex; /* or inline-flex */ |
Important parent properties:
| Property | Most common values | What it does |
|---|---|---|
| flex-direction | row (default), column, row-reverse | Main axis direction |
| justify-content | flex-start, center, space-between, space-around, space-evenly | Distributes free space on main axis |
| align-items | stretch (default), center, flex-start, flex-end, baseline | Aligns items on cross axis |
| gap | 20px, 1.5rem, 1em 2em | Space between items (replaces ugly margin hacks) |
| flex-wrap | nowrap (default), wrap, wrap-reverse | Whether items wrap to new line |
Child (flex item) properties:
- flex: 1 → shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%
- flex-grow, flex-shrink, flex-basis
- align-self → override parent’s align-items for one item
3. Full Realistic Layout Example (Normal Flow + Flexbox)
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layout Fundamentals – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header: Flexbox logo + nav --> <header class="site-header"> <div class="container"> <a href="#" class="logo">Webliance</a> <nav class="main-nav"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#skills">Skills</a> <a href="#contact">Contact</a> </nav> </div> </header> <!-- Hero: Flexbox centered content --> <section class="hero"> <div class="container hero-inner"> <h1>Master Layout Fundamentals</h1> <p>Hyderabad 2026 – Normal Flow + Flexbox = Strong base for any website</p> <a href="#cards" class="btn">Scroll to Examples ↓</a> </div> </section> <!-- Cards: Flexbox responsive grid --> <section id="cards" class="cards-section"> <div class="container"> <h2>Feature Cards (Flexbox)</h2> <div class="cards-grid"> <div class="card"> <h3>Card One</h3> <p>Uses flexbox to center content vertically inside the card.</p> </div> <div class="card"> <h3>Card Two</h3> <p>Grows & shrinks nicely. Wraps on mobile automatically.</p> </div> <div class="card"> <h3>Card Three</h3> <p>Equal height thanks to align-items: stretch (default).</p> </div> </div> </div> </section> <!-- Footer: Simple block --> <footer> <div class="container"> <p>© 2026 Webliance • Built with Chai & Flexbox</p> </div> </footer> </body> </html> |
style.css (focused on layout fundamentals)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
/* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; line-height: 1.6; background: #f8fafc; color: #1e293b; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header – Flexbox logo + nav */ .site-header { background: #1e40af; color: white; padding: 1.5rem 0; } .site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .logo { font-size: 2.2rem; font-weight: bold; color: white; text-decoration: none; } .main-nav { display: flex; gap: 2.5rem; } .main-nav a { color: white; text-decoration: none; font-weight: 500; } /* Hero – Flexbox centering */ .hero { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; text-align: center; padding: 12rem 0 8rem; } .hero-inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .hero h1 { font-size: clamp(3.5rem, 8vw, 6rem); } .btn { background: white; color: #1e40af; padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; font-weight: bold; } /* Cards – Flexbox grid */ .cards-section { padding: 6rem 0; } .cards-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; } .card { flex: 1 1 320px; /* grow + shrink + min width */ background: white; border-radius: 12px; padding: 2.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; display: flex; /* inner flex for content centering */ flex-direction: column; justify-content: center; } .card h3 { margin-bottom: 1rem; color: #1d4ed8; } /* Footer */ footer { background: #0f172a; color: #94a3b8; text-align: center; padding: 3rem 0; } |
What You Should Observe & Play With
- Header: logo left, nav right → justify-content: space-between
- Hero: text + button perfectly centered → flex-direction: column + align-items: center
- Cards: 3 cards side-by-side on desktop → wrap to new rows on mobile → flex-wrap: wrap + flex: 1 1 320px
- Resize browser → watch everything adapt naturally
Quick Learning Path (Recommended Order 2026)
- Normal Flow + block / inline / inline-block (understand defaults first)
- Flexbox (you will use this 80–90% of the time for components & sections)
- CSS Grid (use when you need rows and columns control — full page, galleries, dashboards)
- Media Queries → make layouts responsive
- Positioning (relative, absolute, fixed, sticky) → only when Flex/Grid can’t solve it
How does the page behave when you narrow the browser? Cards stacking? Header nav wrapping nicely?
Next lesson you want?
- “Flexbox deep dive – 10 real patterns”
- “CSS Grid from zero”
- “Make this layout 100% mobile-friendly with media queries”
- “Positioning – when & how to use absolute/fixed/sticky”
- “Common layout mistakes beginners make”
You’re now entering the real magic part of CSS. Chai thanda ho gaya? Fresh cup le aao — let’s keep building! 🚀 😄
