Layouts & Grid

Responsive composition patterns for dashboards, pages, detail views and application workspaces.

Responsive grid

Use a grid that grows from one column to multiple columns as space becomes available.

Grid item 1
Grid item 2
Grid item 3
Grid item 4

Asymmetric grid

Give important content more room while keeping supporting information visible.

Primary content
Supporting card
Supporting card

Dashboard layout

A familiar summary layout for metric cards, chart space and a focused side rail.

Revenue
Projects
Team
Primary chart area
Activity
Tasks

Split view

Use two equal panels to compare details, configure settings or review a before-and-after state.

Current plan

Pro plan with 12 team members and 18 GB of storage.

Recommended upgrade

Scale plan for unlimited guests and priority support.

Sidebar workspace

A fixed utility rail beside a flexible work area is ideal for editors and task spaces.

Task workspace

Flexible content fills all remaining space.

Task card
Task card

Form layout

Use responsive columns for related fields, then return to one column for long-form content.

Auto-fit card grid

Let card width respond naturally without hardcoding a specific number of columns.

Website RedesignUpdated today
Mobile AppUpdated today
CRM MigrationUpdated today
MarketingUpdated today
SupportUpdated today

Density controls

Offer a comfortable and compact layout when users need more information on screen.

Revenue
Orders
Customers
Reports
Tasks
Files

Masonry-style content

Use CSS columns for independent cards with varied content height, such as notes, updates or resources.

Release notes

New delivery signals and saved project views are now available.

Design review

The updated homepage direction is ready for stakeholder feedback.

Workspace tip

Pin your most-used reports to keep operations reviews focused.

Team update

Mia joined the Product workspace as a member.

Planning

The Q4 planning session starts Thursday at 10:00 AM.

Customer insight

NPS improved by 8 points after the latest onboarding changes.