Layout systems
Build complex layouts with Flexbox, CSS Grid, and traditional block-level techniques.
The Layout section
Pick the positioning method that fits your design — CSS Grid, Flexbox or Block — from the Styles pane Layout controls.
Layout fundamentals
Understand block, inline, and inline-block display modes — the foundation of how HTML elements flow on a page.
Flexbox visual guide
Master Flexbox with Site Designer's visual controls — align, justify, wrap, and order items in one-dimensional layouts.
CSS Grid overview
CSS Grid is the most powerful 2D layout system in CSS. Here's how it works and when to use it.
Creating a CSS Grid layout
A seven-step walkthrough: build a full-height page layout with named grid areas, then make it stack at a breakpoint.
CSS Grid controls
The Grid Editor dialog: track settings, rows and columns, cell names, and the two ways to place an item in the grid.
Push and pull techniques
Reorder visual layout without changing the HTML source order using Grid placement, Flexbox order, or framework offset classes.
Stacking content for small screens
Collapse multi-column layouts into a single vertical stack at mobile breakpoints.