Flexbox & Grid

Center a div. The final boss of frontend.

▶ the lesson · ~35s · narrated · tap for sound

the intro

Layout is the part of CSS that used to hurt. Flexbox handles rows and columns in one direction, grid handles full two-dimensional layouts. Learn both and you can build almost any screen without a single float hack.

the sample

the final boss, defeated

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

fun fact ✦

“How to center a div” has millions of search results. Flexbox made them all obsolete.

the docs

MDN: Flexbox ↗MDN: Grid ↗

quick hits about Flexbox & Grid

15-second answers · interviews, tips, trivia & hidden gems

🎤 interview

How do you center a div?

📚 tutorial

Flexbox or grid?

💎 deep

What does flex: 1 actually mean?

🔧 useful

Spacing between flex items?

🔧 useful

A responsive grid without media queries?

💎 deep

Reorder elements without touching HTML?