How Browsers Work · Part 5 — Layout, Paint & Compositing
The pixel pipeline: how styled DOM becomes layout geometry, paint records, raster tiles and compositor frames — why invalidation and animation cost depend on context.
Filter/Tag
#layout
5 entries
-
-
Tailwind, Radix & shadcn/ui · Part 2 — Core Utilities & Layout
The utilities you reach for every day: spacing, sizing, typography and color, then the two layout engines — Flexbox and Grid — the Tailwind way, plus the mobile-first responsive system. With a live flex/grid builder.
-
CSS Grid — The Complete Guide to Every Property (with an Interactive Demo)
A complete, practical CSS Grid reference: tracks, the fr unit, minmax & auto-fit, template-areas, alignment, item placement, and every container/item property — with a live interactive demo.
-
Advanced CSS Grid — Subgrid, Masonry, auto-fit vs auto-fill, and Layout Patterns
Senior CSS Grid deep-dive: auto-fit vs auto-fill, subgrid, masonry proposals, dense packing, named areas, alignment — with an interactive demo.
-
Flexbox vs Grid — The Layout Mental Model Senior Frontend Engineers Actually Need
Flexbox vs Grid mental model for senior engineers: axes, flex shorthand, fr tracks, auto-fit vs auto-fill, intrinsic sizing, and production layout pitfalls.