Why Layout Used to Be Hard

For years, web layout was a hack-fest of float, clearfix, and tables-pretending-to-be-layouts. Modern CSS gives you two purpose-built tools that solve 95% of layouts:

• Flexbox — for one direction at a time (a row OR a column).
• Grid — for two directions at once (rows AND columns).

Learn these two and you can lay out almost any design.

Display: The First Layout Decision

Every element has a display value that controls how it flows:

Value	Behaviour
block	New line, full width ( , , )
inline	Sits in the line of text (, , )
inline-block	Inline-flowing but accepts width/height
flex	Children become flex items (1-D layout)
grid	Children become grid items (2-D layout)
none	Removed from layout entirely

Flexbox — Layout in One Direction

Set display: flex on a *parent* and its direct children become flex items. By default they sit in a row, side by side.

.row {
  display: flex;
  gap: 16px;            /* space between children */
  align-items: center;  /* vertical alignment */
  justify-content: space-between; /* horizontal distribution */
}

The Six Properties You'll Use 99% of the Time

On the parent:

Property	Common values	Does what
flex-direction	row / column	Lay items horizontally or vertically
justify-content	flex-start / center / space-between / space-around	Distribution along the main axis
align-items	stretch / center / flex-start / flex-end	Alignment on the cross axis
gap	any length	Space between items (replaces margin tricks)
flex-wrap	nowrap / wrap	Allow items to drop to a new line	On the child:	Property	Does what
flex: 1	Grow to fill remaining space
flex: 0 0 200px	Don't grow, don't shrink, basis 200 px
align-self: center	Override parent's align-items for one item
margin-left: auto	Push this item to the far right (handy in nav bars)

Centering — the Old Meme, Now Trivial

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

CSS Grid — Layout in Two Directions

Grid lets you draw a table of cells and place items into them.

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr; /* sidebar + main */
  grid-template-rows: auto 1fr auto; /* header, body, footer */
  gap: 16px;
  min-height: 100vh;
}

The fr Unit

fr is a *fraction of remaining space*. After fixed widths and gaps are subtracted, every fr shares what's left.

grid-template-columns: 200px 1fr 1fr;
/* 200px sidebar, then two equal fluid columns */

Repeat & Auto-Fit — Magical Responsive Grids

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

Translation: "fit as many ≥220px columns as you can; share leftover space equally; no media queries needed". This single line gives you a responsive card grid.

Placing Items by Name

Name your areas, then assign children to them:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Flexbox vs Grid — When to Reach for Which

Use Flexbox when…	Use Grid when…
Items flow in one direction	You need rows *and* columns
Item sizes are content-driven	The container defines the structure
You're building a navbar, toolbar, button row	You're building a page layout, dashboard, card grid
You want items to wrap naturally	You want explicit cell placement	You can — and should — nest them: a Grid page layout containing Flex navbars and card rows. Positioning — When Things Need to Float Above the Page position removes elements from the normal flow:	Value	Behaviour
static	Default. Normal flow.
relative	Stays in flow but you can nudge with top/left. Establishes a containing block.
absolute	Removed from flow. Positioned relative to the nearest positioned ancestor.
fixed	Removed from flow. Positioned relative to the viewport (sticks while scrolling).
sticky	Acts relative until you scroll past a threshold, then fixed.	A common pattern: a parent with position: relative containing a child with position: absolute for things like badges or tooltips. Intermediate: Stacking Context & z-index z-index only works on positioned elements. It can be confusing because it lives inside a *stacking context*. A new stacking context is formed when an element has: position: relative	absolute	fixed

sticky and a z-index other than auto

opacity less than 1

transform, filter, perspective, clip-path

isolation: isolate (a great way to deliberately fence off a section)

Children are painted in this order inside their context:

1. Background & borders of the context element 2. Children with negative z-index 3. Non-positioned flow content 4. Positioned children (ascending z-index)

If two siblings live in different contexts, their z-index numbers don't compete with each other.

Intermediate: Auto Margins Are Secretly Powerful

In flexbox, an auto margin absorbs all extra space:

.nav { display: flex; gap: 16px; }
.nav .logout { margin-left: auto; } /* push to far right */

Cleaner than justify-content: space-between when you only need one item separated.

Intermediate: Subgrid (Modern Browsers)

Lets a nested grid inherit the row/column tracks of its parent — perfect for aligning items inside cards to a global grid.

.card { display: grid; grid-template-rows: subgrid; }

Advanced: Container Queries

Until recently you could only respond to *viewport* size. Container queries let a component respond to *its own* size:

.card { container-type: inline-size; }
@container (min-width: 400px) {
  .card .image { float: left; }
}

Now the same card component lays itself out differently in a sidebar vs the main area, no JavaScript needed.

Advanced: Aspect Ratio

Maintain a 16:9 ratio without padding tricks:

.video { aspect-ratio: 16 / 9; width: 100%; }

Advanced: Intrinsic Sizing Keywords

min-content, max-content, and fit-content() size things to their *content*:

.tag { width: max-content; }     /* exactly as wide as the text */
.btn { width: fit-content(200px); } /* up to 200px, smaller if content is shorter */

Practice Path

1. Build a navbar (logo on left, links centred, login on far right) with flexbox + an auto margin. 2. Build a 3-column responsive blog grid using grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). 3. Recreate a "Holy Grail" page layout (header, sidebar, content, aside, footer) with named grid areas. 4. Use position: sticky to keep a sidebar's TOC visible while the page scrolls.