All articles

Tagged: Layout

11 min read

CSS Grid: Everything You Need to Lay Things Out in Two Dimensions

A complete, visual guide to CSS Grid — the grid container, tracks, fr units, repeat() and minmax(), template areas, line-based and area placement, auto-fit vs auto-fill, gap, alignment, implicit grids, and hands-on exercises with solutions.

CSSGridLayoutFrontend
8 min read

CSS Positioning & Stacking: static, relative, absolute, fixed, sticky, and z-index

A complete, practical guide to CSS positioning — the position values and how each one moves an element, the offset properties, containing blocks, sticky positioning, z-index and stacking contexts (and why z-index sometimes does nothing), plus common mistakes and hands-on exercises with solutions.

CSSPositioningLayoutFrontend
17 min read

Flexbox: Everything You Need to Lay Things Out in One Dimension

A complete, visual guide to CSS Flexbox — the two axes, flex-direction, wrapping, justify-content, align-items, gap, grow/shrink/basis, the flex shorthand, auto margins, the min-width:0 gotcha, RTL behaviour, and hands-on exercises with solutions.

CSSFlexboxLayoutFrontend
10 min read

The CSS Box Model: Everything That Actually Matters

A complete, visual guide to the CSS box model — content, padding, border, margin, box-sizing, margin collapsing, logical properties, and the gotchas that bite in real layouts.

CSSBox ModelLayoutFrontend