CSS Grid & Flexbox layout builder · an Atelier studio

IntrinsicFlow

Build responsive page layouts that adapt without media queries.

IntrinsicFlow builds page structure visually. Arrange semantic regions, give each one an intrinsic behaviour such as an auto-fit grid or a sidebar switcher, pin headers and sidebars, and export clean HTML and CSS.

Open IntrinsicFlow See features

Free & open source
Runs in your browser
Exports plain CSS

atelier/css-layout-builder

IntrinsicFlow interface: CSS Grid & Flexbox layout builder

Features

What you can do in IntrinsicFlow.

Visual structure tree

Build the page from semantic elements such as header, nav, main, aside, section, article and footer, nested like a real document.

Intrinsic layout patterns

Auto-fit grids, sidebar switchers, row clusters, stacks, 12-column bento grids and multi-column splits that adapt on their own.

Sticky & fixed chrome

Pin headers, sidebars and footers with offsets, layering and backdrop blur, then scroll inside the preview to test them.

Fluid space & type

Gaps, padding and type sizes use clamp()-based fluid scales that grow smoothly with the viewport.

Live viewport

Drag the preview from phone to wide desktop and watch every region reflow in real time.

Semantic export

Export clean semantic HTML with matching CSS, or a single self-contained HTML file.

How it works

Four steps to production CSS.

Choose a preset
Start from an app shell, article or bento grid.
Shape the structure
Add, nest and name semantic regions.
Pick behaviours
Set grids, switchers, gaps and sticky chrome.
Export
Copy semantic HTML and CSS, or one file.

The output

Layouts that respond to their content

IntrinsicFlow favours intrinsic CSS, such as flex-basis switchers, auto-fit grids and fluid clamp() spacing, so most layouts need zero media queries.

Great for

App shells
Editorial articles
Dashboards & bento grids
Landing pages

Example export

.app-shell {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}

.app-shell > .sidebar {
  flex-basis: 220px;
  flex-grow: 1;
  position: sticky;
  top: 0;
}

.app-shell > .main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 62%;
}

Ready to try IntrinsicFlow?

It opens instantly in your browser. Nothing to install, nothing to sign up for.

Open IntrinsicFlow