> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout Components

> Containers, grids, stacks, divs and responsive layout primitives available in the portal editor.

Layout components are structural building blocks that control how other components are arranged on the page. They do not display content themselves — instead they provide containers, rows, columns and spacing that you fill with other components.

All layout components are found in the **Layout** category of the Blocks panel.

***

## Container

A centred, max-width wrapper that groups child components. This is the most common structural element.

### Properties

<AccordionGroup>
  <Accordion title="Spacing and Margins">
    | Property        | Type   | Description                |
    | --------------- | ------ | -------------------------- |
    | `marginTop`     | select | Top margin utility         |
    | `marginBottom`  | select | Bottom margin utility      |
    | `paddingTop`    | select | Top padding utility        |
    | `paddingBottom` | select | Bottom padding utility     |
    | `paddingStart`  | select | Left/start padding utility |
    | `paddingEnd`    | select | Right/end padding utility  |
  </Accordion>

  <Accordion title="Advanced">
    | Property     | Type | Description            |
    | ------------ | ---- | ---------------------- |
    | `classNames` | text | Additional CSS classes |
  </Accordion>
</AccordionGroup>

**Slot:** `items` — drop child components here. In the editor, the slot has a minimum height of 4 rem and `display: block` for easy targeting. At runtime, it uses `display: contents` to avoid extra wrapper elements.

***

## Responsive Grid

A Bootstrap row/column grid where every column shares the same responsive width. Use this when all columns should be the same size.

### Properties

<AccordionGroup>
  <Accordion title="Columns">
    Each breakpoint controls how many equal-width columns appear:

    | Property    | Breakpoint              | Range |
    | ----------- | ----------------------- | ----- |
    | `xsColumns` | Extra Small (\< 576 px) | 1–12  |
    | `smColumns` | Small (≥ 576 px)        | 1–12  |
    | `mdColumns` | Medium (≥ 768 px)       | 1–12  |
    | `lgColumns` | Large (≥ 992 px)        | 1–12  |
    | `xlColumns` | Extra Large (≥ 1200 px) | 1–12  |

    For example, setting `lgColumns` to 3 and `smColumns` to 1 gives you a three-column layout on desktops that stacks to a single column on small screens.
  </Accordion>

  <Accordion title="Layout">
    | Property | Type  | Description                                  |
    | -------- | ----- | -------------------------------------------- |
    | `fluid`  | radio | Full-width container (no max-width): No, Yes |
  </Accordion>

  <Accordion title="Spacing and Margins">
    Standard margin and padding utilities.
  </Accordion>

  <Accordion title="Advanced">
    | Property     | Type | Description            |
    | ------------ | ---- | ---------------------- |
    | `classNames` | text | Additional CSS classes |
  </Accordion>
</AccordionGroup>

**Slot:** `items` — an array of columns, each with its own content slot. You must have at least 1 column. Add columns by clicking the **+** button in the items array.

### Default

4 columns with empty content.

***

## Custom Grid

A Bootstrap row/column grid where each column has **individual size controls** per breakpoint. Use this when columns need different widths (e.g. an 8/4 sidebar layout).

### Properties

<AccordionGroup>
  <Accordion title="Column sizes (per item)">
    Each column in the `items` array has its own size settings:

    | Property | Breakpoint              | Options    |
    | -------- | ----------------------- | ---------- |
    | `xs`     | Extra Small (\< 576 px) | Auto, 1–12 |
    | `sm`     | Small (≥ 576 px)        | Auto, 1–12 |
    | `md`     | Medium (≥ 768 px)       | Auto, 1–12 |
    | `lg`     | Large (≥ 992 px)        | Auto, 1–12 |
    | `xl`     | Extra Large (≥ 1200 px) | Auto, 1–12 |

    Setting a column to **Auto** (0) makes it auto-sized.
  </Accordion>

  <Accordion title="Layout">
    | Property | Type   | Description                                         |
    | -------- | ------ | --------------------------------------------------- |
    | `fluid`  | radio  | Full-width container: No, Yes                       |
    | `gutter` | select | Gap between columns: Default, None, g-1 through g-5 |
  </Accordion>

  <Accordion title="Spacing and Margins">
    Standard margin and padding utilities.
  </Accordion>

  <Accordion title="Advanced">
    | Property     | Type | Description            |
    | ------------ | ---- | ---------------------- |
    | `classNames` | text | Additional CSS classes |
  </Accordion>
</AccordionGroup>

**Slot:** `items` — an array of columns. Each column has a `content` slot and its own `sizes` group.

### Default

Two columns: first at 8 cols (lg/xl), second at 4 cols (lg/xl) — a classic content-plus-sidebar layout.

***

## Stack

Arranges child components in a vertical or horizontal stack with configurable gap.

### Properties

| Property    | Type   | Default  | Description                             |
| ----------- | ------ | -------- | --------------------------------------- |
| `gap`       | select | gap-4    | Space between items: Default, None, 1–9 |
| `direction` | select | Vertical | Stack direction: Vertical, Horizontal   |

**Spacing and Margins:** standard margin and padding utilities.

**Slot:** `items` — drop components to stack them.

***

## Div

A plain `<div>` wrapper with text alignment and spacing. Use it to group components or apply utility classes.

### Properties

| Property    | Type   | Default | Description                                 |
| ----------- | ------ | ------- | ------------------------------------------- |
| `textAlign` | select | Default | Text alignment: Default, Start, Center, End |

**Spacing and Margins:** standard margin and padding utilities.

**Advanced:** `classNames` — additional CSS classes.

**Slot:** `items` — drop child components here.

***

## Separator

A horizontal rule used to visually divide sections.

| Property     | Type   | Default | Description                             |
| ------------ | ------ | ------- | --------------------------------------- |
| `size`       | select | 4       | Vertical margin: None, 1–9, Auto        |
| `showBorder` | radio  | Yes     | Show a visible horizontal line: No, Yes |
| `className`  | text   | —       | Additional CSS classes                  |

***

## Layout tips

* **Nest layouts freely** — you can place a Responsive Grid inside a Container, or a Stack inside a Custom Grid column.
* **Use Container for max-width** — wrap content in a Container to keep it centred and bounded.
* **Use Stack for quick lists** — the vertical stack with a gap is often the fastest way to arrange components.
* **Use Custom Grid for unequal columns** — when one column needs to be wider (e.g. 8/4 for sidebar), Custom Grid gives you per-column control.
* **Use Responsive Grid for equal columns** — when all columns should be the same width, Responsive Grid is simpler to configure.