Block & Inline

The foundation everything else builds on.

display: block

Block elements take up the full available width and stack vertically. Think of them as bricks in a wall. <div>, <p>, <h1> — all block by default.

Key behaviors to notice:

• block: Each box takes full width and stacks vertically. Width and height are respected.
• inline: Boxes sit next to each other like words. Width and height are ignored.
• inline-block: Best of both — sit inline but respect width/height.
• none: Box 2 vanishes — it's removed from layout entirely, not just hidden.

The Inline Gotcha

Inline elements have a famous quirk: whitespace between them in your HTML creates small gaps. This drove developers crazy for years and was one of the reasons people looked for better layout tools.

<!-- These inline-blocks will have tiny gaps between them -->
<span style="display:inline-block; width:100px">A</span>
<span style="display:inline-block; width:100px">B</span>

<!-- Fix: remove whitespace, or use font-size:0 on parent -->

Flexbox

One-dimensional layout that finally makes alignment easy.

Flexbox lays out items along a single axis (row or column). It excels at distributing space, aligning items, and handling dynamic content sizes. If you've ever struggled to vertically center something — flexbox is your answer.

Interactive Playground

The Flex Shorthand

Child items have their own flex properties. The most important is the flex shorthand:

.item {
  flex: 1;          /* flex-grow:1, flex-shrink:1, flex-basis:0% */
  flex: 0 0 200px;  /* don't grow, don't shrink, start at 200px */
  flex: 2 1 auto;  /* grow twice as much as flex:1 siblings */
}

Child Properties Playground

Classic Flexbox Patterns

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex: 1; }
.footer  { /* stays at bottom */ }

.row { display: flex; gap: 16px; }
.col { flex: 1; } /* all columns share space equally */

CSS Grid

Two-dimensional layout. The one we were waiting for.

While Flexbox works in one direction at a time, Grid lets you control rows and columns simultaneously. It was the first CSS layout system actually designed for page layout from the start.

Interactive Playground

Named Grid Areas

Grid's killer feature: you can draw your layout with ASCII art. Each string is a row, each word is a column.

Grid vs Flexbox: When to Use Which?

Other Display Types

The supporting cast you should know about.

display: inline-flex & inline-grid

These make the container inline while keeping flex/grid behavior inside. Useful when you want a flex container that sits in a line of text.

display: table

Yes, display: table still exists and is sometimes useful! It makes any element behave like a <table> without using table HTML. Before flexbox, this was how you got equal-height columns.

.fake-table     { display: table; }
.fake-row       { display: table-row; }
.fake-cell      { display: table-cell; vertical-align: middle; }
/* Today: just use flexbox or grid instead */

display: contents

A newer and powerful one. The element's box disappears, but its children participate in the parent's layout as if they were direct children. Great for wrapper elements that shouldn't affect layout.

display: flow-root

Creates a new block formatting context. The modern, clean replacement for the clearfix hack. If you have floated children that are overflowing their parent, display: flow-root on the parent contains them.

.parent {
  display: flow-root;  /* Contains floated children. No more clearfix! */
}

Complete Display Type Reference

Room Arranger

Test your CSS layout skills. Arrange the furniture to match the target layout.