---
title: MultiColumnMaxWidthLayout
---

---

title: MultiColumnMaxWidthLayout

---

# MultiColumnMaxWidthLayout

Component for use as Layout to be filled with the rest of the Components.

## Props

| Name                        | Description                                                                 | Type                       | Default                         |
| --------------------------- | --------------------------------------------------------------------------- | -------------------------- | ------------------------------- |
| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>AnimationProp</code> | <code>() => AnimateWidth</code> |
| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code>       | <code></code>                   |

## Slots

| Name                       | Description                                                                 | Bindings<br />(name - type - description) |
| -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------- |
| <code>header-start</code>  | Slot that can be used to insert content into the left part of the header.   | None                                      |
| <code>header-middle</code> | Slot that can be used to insert content into the center part of the header. | None                                      |
| <code>header-end</code>    | Slot that can be used to insert content into the right part of the header.  | None                                      |
| <code>sub-header</code>    | Slot that can be used to insert content into below the header.              | None                                      |
| <code>toolbar-aside</code> |                                                                             | None                                      |
| <code>toolbar-body</code>  | Slot that can be used to insert content above the body.                     | None                                      |
| <code>main-aside</code>    | Slot that can be used to insert content into the left side bar.             | None                                      |
| <code>main-body</code>     | Slot that can be used to insert the body content.                           | None                                      |
| <code>scroll-to-top</code> |                                                                             | None                                      |

## Layout

This component has the following layout with fixed headers and collapsible fixed asides:

| header-start  | header-middle |  header-end   |
| :-----------: | :-----------: | :-----------: |
|  sub-header   |               |               |
| toolbar-aside |    toolbar    |               |
|  main-aside   |     main      |               |
|               |               | scroll-to-top |

## Design Tokens

The component has also the following `Design Tokens` to configure it:

|                        token                        | default value |
| :-------------------------------------------------: | :-----------: |
|         --x-size-column-gap-layout-columns          |     20px      |
|     --x-size-padding-top-layout-columns-header      |      0px      |
|    --x-size-padding-bottom-layout-columns-header    |      0px      |
|      --x-size-margin-top-layout-columns-header      |      0px      |
|    --x-size-margin-bottom-layout-columns-header     |      0px      |
|     --x-color-background-layout-columns-header      |  transparent  |
|       --x-color-border-layout-columns-header        |  transparent  |
|     --x-size-border-width-layout-columns-header     |      0px      |
|        --x-flow-layout-columns-header-start         |  row nowrap   |
|    --x-size-justify-layout-columns-header-start     |  flex-start   |
|     --x-size-align-layout-columns-header-start      |  flex-start   |
|        --x-flow-layout-columns-header-middle        |  row nowrap   |
|    --x-size-justify-layout-columns-header-middle    |    center     |
|     --x-size-align-layout-columns-header-middle     |  flex-start   |
|         --x-flow-layout-columns-header-end          |  row nowrap   |
|     --x-size-justify-layout-columns-header-end      |   flex-end    |
|      --x-size-align-layout-columns-header-end       |   flex-end    |
|   --x-size-padding-top-layout-columns-sub-header    |      0px      |
|  --x-size-padding-bottom-layout-columns-sub-header  |      0px      |
|    --x-size-margin-top-layout-columns-sub-header    |      0px      |
|  --x-size-margin-bottom-layout-columns-sub-header   |      0px      |
|   --x-color-background-layout-columns-sub-header    |  transparent  |
|     --x-color-border-layout-columns-sub-header      |  transparent  |
|   --x-size-border-width-layout-columns-sub-header   |      0px      |
|         --x-flow-layout-columns-sub-header          |  row nowrap   |
|     --x-size-justify-layout-columns-sub-header      |  flex-start   |
|      --x-size-align-layout-columns-sub-header       |  flex-start   |
|     --x-size-padding-top-layout-columns-toolbar     |      0px      |
|   --x-size-padding-bottom-layout-columns-toolbar    |      0px      |
|     --x-size-margin-top-layout-columns-toolbar      |      0px      |
|    --x-size-margin-bottom-layout-columns-toolbar    |      0px      |
|     --x-color-background-layout-columns-toolbar     |  transparent  |
|     --x-color-border-layout-columns-sub-toolbar     |  transparent  |
|    --x-size-border-width-layout-columns-toolbar     |      0px      |
|        --x-flow-layout-columns-toolbar-aside        |  row nowrap   |
|    --x-size-justify-layout-columns-toolbar-aside    |  flex-start   |
|     --x-size-align-layout-columns-toolbar-aside     |    center     |
|        --x-flow-layout-columns-toolbar-body         |  row nowrap   |
|    --x-size-justify-layout-columns-toolbar-body     |  flex-start   |
|     --x-size-align-layout-columns-toolbar-body      |    center     |
|      --x-size-padding-top-layout-columns-main       |      0px      |
|     --x-size-padding-bottom-layout-columns-main     |      0px      |
|       --x-size-margin-top-layout-columns-main       |      0px      |
|     --x-size-margin-bottom-layout-columns-main      |      0px      |
|      --x-color-background-layout-columns-main       |  transparent  |
|      --x-color-border-layout-columns-sub-main       |  transparent  |
|      --x-size-border-width-layout-columns-main      |      0px      |
|   --x-color-background-layout-columns-main-aside    |  transparent  |
|   --x-color-border-layout-columns-sub-main-aside    |  transparent  |
|   --x-size-border-width-layout-columns-main-aside   |      0px      |
|    --x-color-background-layout-columns-main-body    |  transparent  |
|    --x-color-border-layout-columns-sub-main-body    |  transparent  |
|   --x-size-border-width-layout-columns-main-body    |      0px      |
| --x-size-margin-bottom-layout-columns-scroll-to-top |     10px      |
|  --x-size-margin-left-layout-columns-scroll-to-top  |     10px      |

|                        token                        |                   use                    |
| :-------------------------------------------------: | :--------------------------------------: |
|         --x-size-column-gap-layout-columns          |         The gap between columns          |
|     --x-size-padding-top-layout-columns-header      |      The padding top of the header       |
|    --x-size-padding-bottom-layout-columns-header    |     The padding bottom of the header     |
|      --x-size-margin-top-layout-columns-header      |       The margin top of the header       |
|    --x-size-margin-bottom-layout-columns-header     |     The margin bottom of the header      |
|     --x-color-background-layout-columns-header      |    The background color of the header    |
|       --x-color-border-layout-columns-header        |      The border color of the header      |
|     --x-size-border-width-layout-columns-header     |      The border width of the header      |
|        --x-flow-layout-columns-header-start         |    The flex flow of the start header     |
|    --x-size-justify-layout-columns-header-start     | The justify content of the start header  |
|     --x-size-align-layout-columns-header-start      |   The align items of the start header    |
|        --x-flow-layout-columns-header-middle        |    The flex flow of the middle header    |
|    --x-size-justify-layout-columns-header-middle    | The justify content of the middle header |
|     --x-size-align-layout-columns-header-middle     |   The align items of the middle header   |
|         --x-flow-layout-columns-header-end          |     The flex flow of the end header      |
|     --x-size-justify-layout-columns-header-end      |  The justify content of the end header   |
|      --x-size-align-layout-columns-header-end       |    The align items of the end header     |
|   --x-size-padding-top-layout-columns-sub-header    |   The padding bottom of the sub header   |
|  --x-size-padding-bottom-layout-columns-sub-header  |    The padding top of the sub header     |
|    --x-size-margin-top-layout-columns-sub-header    |   The margin bottom of the sub header    |
|  --x-size-margin-bottom-layout-columns-sub-header   |     The margin top of the sub header     |
|   --x-color-background-layout-columns-sub-header    |  The background color of the sub header  |
|     --x-color-border-layout-columns-sub-header      |    The border color of the sub header    |
|   --x-size-border-width-layout-columns-sub-header   |    The border width of the sub header    |
|         --x-flow-layout-columns-sub-header          |     The flex flow of the sub header      |
|     --x-size-justify-layout-columns-sub-header      |  The justify content of the sub header   |
|      --x-size-align-layout-columns-sub-header       |    The align items of the sub header     |
|     --x-size-padding-top-layout-columns-toolbar     |      The padding top of the toolbar      |
|   --x-size-padding-bottom-layout-columns-toolbar    |    The padding bottom of the toolbar     |
|     --x-size-margin-top-layout-columns-toolbar      |      The margin top of the toolbar       |
|    --x-size-margin-bottom-layout-columns-toolbar    |     The margin bottom of the toolbar     |
|     --x-color-background-layout-columns-toolbar     |   The background color of the toolbar    |
|     --x-color-border-layout-columns-sub-toolbar     |     The border color of the toolbar      |
|    --x-size-border-width-layout-columns-toolbar     |     The border width of the toolbar      |
|        --x-flow-layout-columns-toolbar-aside        |    The flex flow of the toolbar aside    |
|    --x-size-justify-layout-columns-toolbar-aside    | The justify content of the toolbar aside |
|     --x-size-align-layout-columns-toolbar-aside     |   The align items of the toolbar aside   |
|        --x-flow-layout-columns-toolbar-body         |  The flex flow of the end toolbar body   |
|    --x-size-justify-layout-columns-toolbar-body     | Justify content of the end toolbar body  |
|     --x-size-align-layout-columns-toolbar-body      |   The align items of the toolbar body    |
|      --x-size-padding-top-layout-columns-main       |       The padding top of the main        |
|     --x-size-padding-bottom-layout-columns-main     |      The padding bottom of the main      |
|       --x-size-margin-top-layout-columns-main       |        The margin top of the main        |
|     --x-size-margin-bottom-layout-columns-main      |      The margin bottom of the main       |
|      --x-color-background-layout-columns-main       |     The background color of the main     |
|        --x-color-border-layout-columns-main         |       The border color of the main       |
|      --x-size-border-width-layout-columns-main      |       The border width of the main       |
|   --x-color-background-layout-columns-main-aside    |  The background color of the main aside  |
|     --x-color-border-layout-columns-main-aside      |    The border color of the main aside    |
|   --x-size-border-width-layout-columns-main-aside   |  The border width of the sub main aside  |
|    --x-color-background-layout-columns-main-body    |  The background color of the main body   |
|      --x-color-border-layout-columns-main-body      |    The border color of the main body     |
|   --x-size-border-width-layout-columns-main-body    |  The border width of the sub main body   |
| --x-size-margin-bottom-layout-columns-scroll-to-top |  The margin bottom of the scroll to top  |
|  --x-size-margin-left-layout-columns-scroll-to-top  |   The margin left of the scroll to top   |