← Back to the Build Your Homepage series

🎨

EPISODE 05

display:flex · justify-content · align-items · gap · display:grid · template · areas · auto-fit · viewport · media queries · mobile-first · clamp()

Flexbox · CSS Grid · Responsive Design

Flexbox makes 1-D layout (a row or a column) intuitive. Master the container and item properties and you will solve 80% of layout problems. Grid handles 2-D layout — rows and columns together. The right tool for dashboards, magazine layouts, and complex page templates. Build one layout that works on phones, tablets, and desktops. Use a mobile-first approach, sensible breakpoints, and fluid units like clamp() for typography.

FlexboxlayoutresponsiveGridtemplate-areasmedia querymobile-firstclamp

Duration

⏱ About 2 hours + About 2 hours + About 2 hours

Level

📊 Beginner

Prerequisite

🎯 css-03

OUTCOME

Build navbars, card lists, and centered hero sections with one technique / Compose complex layouts without nested div soup / A layout that adapts gracefully from 320px to 1440px screens

What you'll learn

1Understand the main axis and cross axis
2Use justify-content and align-items correctly
3Control wrapping with flex-wrap and gap
4Distribute space with flex-grow / shrink / basis
5Define columns and rows with grid-template-columns/rows
6Use fr units and minmax() for responsive sizing
7Lay out with grid-template-areas (named regions)
8Build responsive card grids with auto-fit and minmax
9Include the viewport meta tag correctly
10Write mobile-first media queries
11Use rem/em/% and clamp() for fluid sizing
12Test layouts in browser DevTools device mode

Flexbox

Flexbox makes 1-D layout (a row or a column) intuitive. Master the container and item properties and you will solve 80% of layout problems.

1. Make a Container Flex

css

.navbar {
  display: flex;
  justify-content: space-between; /* main axis */
  align-items: center;            /* cross axis */
  gap: 16px;
  padding: 12px 24px;
}

display: flex turns the element into a flex container. Direct children become flex items.

2. Container Properties

Property	Values
flex-direction	row \| column \| row-reverse \| column-reverse
justify-content	start \| end \| center \| space-between \| space-around \| space-evenly
align-items	stretch (default) \| start \| center \| end \| baseline
flex-wrap	nowrap (default) \| wrap \| wrap-reverse
gap	Space between items (no margins needed)

3. Item Properties

css

.sidebar { flex: 0 0 240px; }   /* fixed width: 240px */
.main    { flex: 1; }            /* fill remaining */
.card    { flex: 1 1 280px; }    /* grow, shrink, min 280 */

flex: grow shrink basis. grow=1 means "take a share of leftover space".

4. Common Patterns

css

/* Perfect centering */
.center { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

/* Card grid that wraps */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cards > .card { flex: 1 1 240px; }

/* Sticky footer */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app > main { flex: 1; }

CSS Grid

Grid handles 2-D layout — rows and columns together. The right tool for dashboards, magazine layouts, and complex page templates.

1. A Basic Grid

css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  gap: 16px;
}

1fr means "1 fraction of available space". repeat(3, 1fr) is shorthand for 1fr 1fr 1fr.

2. Auto-fit + minmax (responsive grid)

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* As many columns as fit, each at least 240px wide */

💡

This single rule replaces a whole set of media queries — the grid reflows automatically.

3. Template Areas (Layout)

css

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.app > header  { grid-area: header; }
.app > nav     { grid-area: sidebar; }
.app > main    { grid-area: main; }
.app > footer  { grid-area: footer; }

4. Placing Items by Line

css

.feature {
  grid-column: 1 / span 2;   /* start at line 1, span 2 columns */
  grid-row: 2 / 4;           /* from row line 2 to row line 4 */
}

Responsive Design

Build one layout that works on phones, tablets, and desktops. Use a mobile-first approach, sensible breakpoints, and fluid units like clamp() for typography.

1. The Viewport Meta Tag

html

<meta name="viewport" content="width=device-width, initial-scale=1">

⚠️

Without this meta tag, mobile browsers render at 980px and zoom out — media queries effectively do nothing.

2. Mobile-First Media Queries

css

/* Base styles target mobile first */
.container { padding: 16px; }
.grid      { display: grid; gap: 12px; grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; padding: 32px; }
  .grid      { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

3. Fluid Sizing with clamp()

css

h1 {
  /* min, preferred, max */
  font-size: clamp(1.75rem, 4vw, 3rem);
}
.container {
  width: min(100%, 1200px);
  padding-inline: clamp(16px, 4vw, 48px);
}

clamp() scales smoothly between viewports — fewer breakpoints needed.

4. Suggested Breakpoints

Name	Min width	Use case
sm	640px	Large phone / small tablet
md	768px	Tablet portrait
lg	1024px	Tablet landscape / small laptop
xl	1280px	Desktop
2xl	1536px	Large desktop

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗

Comments 0

No comments yet. Be the first.

Only members can comment.

Comments with ads, abuse, personal information or illegal content are hidden or removed. Comments are shown with your nickname. Privacy Policy