```tsx lines expandable theme={null}
import { Layout, Card } from "@servicetitan/anvil2";
function App() {
const cardProps = {
background: "stronger" as const,
style: { width: "100%" },
};
const createArray = (number: number) => [...new Array(number)];
return (
span=12
{createArray(2).map((_, i) => (
span=6
))}
{createArray(3).map((_, i) => (
span=4
))}
{createArray(4).map((_, i) => (
span=3
))}
{createArray(6).map((_, i) => (
span=2
))}
{createArray(12).map((_, i) => (
1
))}
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Layout } from "@servicetitan/anvil2";
const ExampleComponent = () => (
{/* full-width content... */}
{/* one-quarter-width content... */}
{/* three-quarter-width content... */}
);
```
### Using layouts in pages
In general, the `Layout` component is intended to be used as the child of a [Page.Content](/docs/web/components/page/code#page-components/design) component. Using these components together creates the foundation of page layouts in Anvil2.
```tsx lines expandable theme={null}
import { Layout, Page, Card, Text } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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.
```tsx theme={null}
// max-width: 1280px
{/* content... */}
```
To make a layout fluid on larger screens, set the `fluid` prop on the `Layout` component to `true`.
```tsx theme={null}
// max-width: none
{/* content... */}
```
### 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](/docs/web/components/layout/design#columns-per-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](#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
```tsx lines expandable theme={null}
import { Layout, Card } from "@servicetitan/anvil2";
function App() {
return (
{[...new Array(4)].map((_, i) => (
))}
);
}
export default App;
```
#### Default
```tsx lines expandable theme={null}
import { Layout, Card } from "@servicetitan/anvil2";
function App() {
return (
{[...new Array(4)].map((_, i) => (
))}
);
}
export default App;
```
#### Wide
```tsx lines expandable theme={null}
import { Layout, Card } from "@servicetitan/anvil2";
function App() {
return (
{[...new Array(4)].map((_, i) => (
))}
);
}
export default App;
```
## Best Practices
* Use the `Layout` component as the first child of the [Page.Content](/docs/web/components/page/code#page-components/) component.
* Use layouts to appropriately divide a page into columns, then use the [Grid](/docs/web/components/grid/code/) and [Flex](/docs/web/components/flex/code/) components to create smaller UI layouts within the content of the page.
