• Chapter 4 — CSS Grid
  • Flexbox vs Grid — When to Use Which
  • Turning On Grid
  • The fr Unit — Fractional Space
  • repeat() — Don’t Repeat Yourself
  • gap
  • auto-fit + minmax() — Responsive Grids Without Media Queries
  • Spanning Columns and Rows
  • grid-template-areas — Named Layout
  • Full Real-World Blog Layout
  • Grid vs Flexbox Comparison

§Chapter 4 — CSS Grid

§Flexbox vs Grid — When to Use Which

Flexbox → 1D:  [item][item][item]  (a row OR a column)

Grid    → 2D:  [item][item][item]
               [item][item][item]  (rows AND columns together)

Simple rule: Navigation bar, button groups, centering → Flexbox. Page layouts, card grids, complex structure → Grid.

§Turning On Grid

<div class="grid-container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columns, each 200px */
}

Grid automatically wraps to new rows — you only define columns.

§The fr Unit — Fractional Space

grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
grid-template-columns: 2fr 1fr 1fr;  /* first column is double */
grid-template-columns: 250px 1fr;    /* sidebar fixed, content flexible */

§repeat() — Don’t Repeat Yourself

grid-template-columns: repeat(4, 1fr);         /* 4 equal columns */
grid-template-columns: 250px repeat(3, 1fr);   /* sidebar + 3 columns */

§gap

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

§auto-fit + minmax() — Responsive Grids Without Media Queries

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

• Minimum width: 250px — never shrink below this
• Maximum width: 1fr — grow to fill space if available

The grid automatically adjusts columns based on screen size. One line. No JavaScript. No media queries.

§Spanning Columns and Rows

.item {
  grid-column: 1 / 3;   /* span from line 1 to line 3 */
  grid-row: 1 / 2;
}

/* Shorthand using span */
grid-column: span 2;    /* span 2 columns from current position */
grid-row: span 3;

§grid-template-areas — Named Layout

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

<div class="page">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

Result:

┌───────────────────────────────┐
│            header             │
├──────────┬────────────────────┤
│ sidebar  │      content       │
├──────────┴────────────────────┤
│            footer             │
└───────────────────────────────┘

Use . for an empty cell:

grid-template-areas:
  "header header"
  ".      content"
  "footer footer";

§Full Real-World Blog Layout

<div class="page">
  <header class="header"><h1>My Blog</h1></header>
  <aside class="sidebar"><h3>Categories</h3></aside>
  <main class="content">
    <div class="post-grid">
      <div class="card">Post 1</div>
      <div class="card">Post 2</div>
      <div class="card">Post 3</div>
    </div>
  </main>
  <footer class="footer"><p>© 2026</p></footer>
</div>

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 70px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

/* Post cards — Grid inside Grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

§Grid vs Flexbox Comparison

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026