Skip to main content

​
Common Examples

import { Layout } from "@servicetitan/anvil2";

const ExampleComponent = () => (
  <Layout>
    <Layout.Item span={12}>{/* full-width content... */}</Layout.Item>
    <Layout.Item span={3}>{/* one-quarter-width content... */}</Layout.Item>
    <Layout.Item span={9}>{/* three-quarter-width content... */}</Layout.Item>
  </Layout>
);

​
Using layouts in pages

In general, the Layout component is intended to be used as the child of a Page.Content component. Using these components together creates the foundation of page layouts in Anvil2.

​
Fixed and fluid layouts

By default, layouts are fixed, meaning that they have a maximum width of 1280px and are centered on the page. On smaller screens, they become fluid and fill the width of the page.
// max-width: 1280px
<Layout>
  <Layout.Item span={12}>{/* content... */}</Layout.Item>
</Layout>
To make a layout fluid on larger screens, set the fluid prop on the Layout component to true.
// max-width: none
<Layout fluid>
  <Layout.Item span={12}>{/* content... */}</Layout.Item>
</Layout>

​
Responsive layouts

Layout items come with responsive styles baked-in. As the parent layout becomes more narrow, the layout items will adjust accordingly based on the number of columns available in that breakpoint.For example, a Layout.Item with span={4} will take up a third of the width on breakpoints lg, xl, and xxl, two-thirds on the md breakpoint, and full-width on sm breakpoint and below.Note – these breakpoints correspond to the size of the layout rather than the screen, using container queries. Sidebars and panels may also affect the number of columns displayed.The Layout.Item also features responsive props, which can be used to override the span value at specific breakpoints. See the Layout.Item Props for details.

​
Layout density variants

Use the variant prop of the Layout component to control the gap between the layout items. Note that the gap will also change based on the width of the layout.

​
Narrow

​
Default

​
Wide

​
Best Practices

  • Use the Layout component as the first child of the Page.Content component.
  • Use layouts to appropriately divide a page into columns, then use the Grid and Flex components to create smaller UI layouts within the content of the page.
Last modified on January 23, 2026