Grid & Responsive Layout

Overview

Grid & Responsive Layout defines how every Create UI screen adapts from mobile to wide desktop. It ships as 6 named grid styles (2XL Desktop, XL Desktop, XL Desktop Sidebar, LG Web, MD Tablet, and SM Mobile), so the columns, gutters, and margins for each breakpoint are set in one click. Gutters scale with the breakpoint, from 32px on mobile to 80px on the widest desktop layouts, and in code the semantic spacing, typography, and radius tokens rescale on their own as the viewport grows.

When should you use them?

Use the grid whenever you lay out a page or a section: landing pages, dashboards, settings screens, and marketing blocks. Pick the style that matches the frame and its content, like XL Desktop Sidebar for app screens with a side navigation, instead of placing elements with fixed pixel widths.

How should you use them?

• Select a frame, click Grid in the right panel, and apply the matching named style instead of typing columns and gutters by hand.
• Design every breakpoint from its own grid style so mobile, tablet, and desktop stay a variation of one layout.
• Use the Sidebar style for screens with a fixed side navigation, so the content columns start after the rail.
• Change layout structure (column count, stacking, sidebar visibility) at breakpoints, and leave component sizes to the tokens.
• Keep content inside the grid margins so line lengths stay readable on wide screens.