Topic

Render Tree & Layout Algorithms

DOM + CSSOM → render tree → layout (block/inline/flow, flex/grid) → fragmentation and reflow.

layoutreflowrender-tree

HTML

sample

<main class="grid">
  <article class="panel">Flow layout</article>
  <article class="panel">Flex & grid</article>
</main>

CSS

sample

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.panel { min-height: 140px; border: 1px solid #1e293b; }

JavaScript

sample

document.querySelector('.grid')?.classList.toggle('wide')

Visualizer

Render Tree & Layout

Formatting contexts, flow, and reflow counters.

Visualizer

Render Tree & Layout

Render tree merges DOM + CSSOM. Layout picks formatting contexts, computes used values, and triggers reflows.

live

Controls

Viewport width: 900px

Reflows: 0 · Layout invalidation bubbles up the ancestor chain.

Visualization

Header

Formatting: grid · Span: 2

Sidebar

Formatting: grid · Span: 1

Content

Formatting: grid · Span: 2

Footer

Formatting: grid · Span: 2

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.