---
title: Layout
description: Layout is used to create macro layouts that responds to different media sizes.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/layout
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/layout.md
---

# Layout

Layout is used to create macro layouts that responds to different media sizes.

##### JS

```ts
import {extend, Layout, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const layout = root.createComponent(
    Layout,
    {
      spacing: 'base',
      sizes: [1, 0.2, 0.8, 1],
    },
    [
      root.createComponent(View, {border: 'base', padding: 'base'}, 'Header'),
      root.createComponent(View, {border: 'base', padding: 'base'}, 'Sidebar'),
      root.createComponent(View, {border: 'base', padding: 'base'}, 'Content'),
      root.createComponent(View, {border: 'base', padding: 'base'}, 'Footer'),
    ],
  );

  root.appendChild(layout);
});
```

##### React

```tsx
import {render, Layout, View} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <Layout spacing="base" sizes={[1, 0.2, 0.8, 1]}>
      <View border="base" padding="base">
        Header
      </View>
      <View border="base" padding="base">
        Sidebar
      </View>
      <View border="base" padding="base">
        Content
      </View>
      <View border="base" padding="base">
        Footer
      </View>
    </Layout>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| inlineAlignment? | `"leading" \| "trailing"` | Specifies the inline alignment of the layout in its container. By default, it will be centered. |
| blockAlignment? | `"center" \| "trailing"` | Specifies the block alignment of the layout in its container. By default, it will be leading. |
| maxInlineSize? | `number` | Default maximum inline size of the layout within its viewport. The size specified will constrain the space available for its sections and will be centered in the viewport unless specified otherwise with `inlineAlignment`. Numbers less than or equal to 1 are treated as percentages and numbers greater than 1 are treated as pixels. Examples: - `500` represents `500px` - `0.5` represents `50%` - `1` represents `100%` |
| sizes? | `("auto" \| "fill" \| number)[]` | Default sizes for each section of the layout |
| media? | `Media[]` | Sizes at different media |

### Media

| Name | Type | Description |
| - | - | - |
| viewportSize | `"small" \| "medium" \| "large"` | |
| maxInlineSize? | `number` | Maximum inline size of the layout for this viewport. The size specified will constrain the space available for its sections and will be centered in the viewport unless specified otherwise with `inlineAlignment`. Numbers less than or equal to 1 are treated as percentages and numbers greater than 1 are treated as pixels. Examples: - `500` represents `500px` - `0.5` represents `50%` - `1` represents `100%` |
| sizes? | `("auto" \| "fill" \| number)[]` | Sizes for each section of the layout for this media. If a `maxInlineSize` is specified, make sure you adapt your pixel values accordingly. |

***