Layout – Design

Anatomy

The Layout consists of two primary elements that work together to define page structure and columns.

Gutter
Column

Options

The Layout supports responsive column configurations, width options, and gutter variants to accommodate various page structure scenarios.

Columns per breakpoint

Breakpoint	# of columns
SM `>=640px`	4
MD `>=768px`	6
LG `>=1024px`	12
XL `>=1280px`	12
XXL `>=1536px`	12

Width

There are two width options available: Default (fixed) and Fluid.

Default

By default, Layout is fixed: it has a max width of 1280px and centers on the page. Below 1280px, it fills the available width.

Fluid

When Layout is fluid, Layout removes the 1280px max width and fills the available area at every screen size.

Variants

There are three variants of Layout: Default, Wide, and Narrow. Each variant has different gutter values. Gutters are the spacing between columns.

Default

Breakpoint	Gutter
SM `>=640px`	$size-4 / 1rem / 16px
MD `>=768px`	$size-6 / 1.5rem / 24px
LG `>=1024px`	$size-6 / 1.5rem / 24px
XL `>=1280px`	$size-6 / 1.5rem / 24px
XXL `>=1536px`	$size-6 / 1.5rem / 24px

Wide

Breakpoint	Gutter
SM `>=640px`	$size-6 / 1.5rem / 24px
MD `>=768px`	$size-8 / 2rem / 32px
LG `>=1024px`	$size-10 / 2.5rem / 40px
XL `>=1280px`	$size-10 / 2.5rem / 40px
XXL `>=1536px`	$size-10 / 2.5rem / 40px

Narrow

Breakpoint	Gutter
SM `>=640px`	$size-2 / 0.5rem / 8px
MD `>=768px`	$size-4 / 1rem / 16px
LG `>=1024px`	$size-4 / 1rem / 16px
XL `>=1280px`	$size-4 / 1rem / 16px
XXL `>=1536px`	$size-4 / 1rem / 16px

Behavior

The Layout responds to different breakpoints and content requirements while maintaining consistent column structure.

Usage Guidelines

Standard	Requirement
DoStructure the overall page	Use the Layout to construct the overall structure of a page. Place section content directly in each Layout Item; a Layout Item does not need a Card. Use a Card inside a Layout Item only for a peer tile, a chart, or an isolated group without a section heading.
DoPlace as the first child for page structure	A page body needs its overall column structure; place the Layout as the first child of the Page’s main content.
DoDivide a page into columns	When the page divides into columns, each column holds its own content.
DoUse a Layout Item for full-width content	Even a lone table or Alert belongs in a Layout Item that spans all 12 columns, so the content lines up with the Page Header on wide screens.
DoStart with fixed width	Start with the default fixed layout. Choose fluid only when the page’s primary content needs more than 1280px of width on large screens.
DoUse fixed layout for most pages	Use the default fixed layout for most pages, including dashboards, forms, detail pages, and list pages. Fixed layouts optimize readability on larger screens by limiting line lengths and provide greater design control. Both widths are responsive: below 1280px, a fixed layout fills the available width just like a fluid one.
DoUse fluid layout for wide content	Use a fluid layout when the primary content is wide enough to use the space beyond 1280px, such as a data table with many columns, a scheduling board, or a map. Fluid layouts maximize available screen space on large monitors.
DoUse default gutters for balanced layouts	Use the default gutter variant for balanced layouts with standard spacing between columns. This variant provides a neutral aesthetic that works well across content types and screen sizes, ensuring consistent visual flow and stable visual hierarchy.
DoUse narrow gutters for dense layouts	Choose the narrow gutter variant for compact, dense layouts where maximizing content visibility is crucial. Narrow gutters focus user attention on specific content elements and help create cohesive groupings. They work well for mobile-friendly designs where screen space is limited.
DoUse wide gutters for spacious layouts	Use the wide gutter variant to create spacious layouts with larger gutters between columns. Wide gutters provide breathing room around content elements, visually separate different sections, and enhance readability for text-heavy interfaces or long-form content.
DoMatch gutters to context	Consider user context and content type when selecting a gutter variant. Ensure the chosen variant adapts responsively across devices and screen sizes, and test layouts to confirm designs remain effective on both desktop and mobile devices.
Don’tOrganize elements within other containers	Layout is not used for organizing elements within other containers. For smaller UI layouts within a section or inside another container, such as a Card, use Grid or Flex instead.
Don’tUse fluid layout for density alone	A dense page doesn’t need a fluid layout on its own. Density sets how much content a page shows, while width sets how far that content stretches on large screens. When you use a fluid layout, set `fluid` on both the `Page.Header` `layout` prop and the `Layout` inside `Page.Content` so their edges align.

Content

Content within the Layout should be organized using the column structure to create clear visual hierarchy.

Keyboard Interaction

Users can navigate the Layout using standard keyboard controls.

Anvil2 Web

Resources

Layout – Design

Anatomy

Options

Columns per breakpoint

Width

Default

Fluid

Variants

Default

Wide

Narrow

Behavior

Usage Guidelines

Content

Keyboard Interaction

​Anatomy

​Options

​Columns per breakpoint

​Width

​Default

​Fluid

​Variants

​Default

​Wide

​Narrow

​Behavior

​Usage Guidelines

​Content

​Keyboard Interaction

Anatomy

Options

Columns per breakpoint

Width

Default

Fluid

Variants

Default

Wide

Narrow

Behavior

Usage Guidelines

Content

Keyboard Interaction