Web Development Lesson 3 of 5

CSS Architecture: Flexbox, Grid, and Modern Variables

32:40 Foundations of Modern Web Development

Master modern responsive layout. Harness the 1-dimensional power of Flexbox and the 2-dimensional power of CSS Grid alongside CSS custom properties.

Lesson notes

Forget old float hacks and table layouts. Modern CSS Flexbox and Grid give you complete layout superpower in just a few lines of declarative styling.

What you'll learn

Flexbox for 1D alignments (navbars, button groups, cards)
CSS Grid for 2D page layouts and responsive auto-fill grids
CSS Custom Properties (:root variables) for design system tokens

1. Flexbox in 60 Seconds

Setting `display: flex` turns children into flexible items. Control horizontal distribution with `justify-content` and vertical alignment with `align-items`.

2. The Magic Responsive Grid

Create an automatic responsive card grid without a single media query: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;`

css

:root {
  --primary: #147755;
  --surface: #ffffff;
  --radius: 12px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

Modern CSS with variables and an auto-responsive grid.