> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/utilities/layout.md).

# Layout utilities

Utilities for arranging content: flex shorthands, grid stacking, layout-variable gaps and padding, and content alignment.

Utilities for arranging content: flex shorthands, grid stacking, layout-variable gaps and padding, and content alignment.

| Class                                                                                                          | What it does                                                                                                                                                           |
| -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `flex-center`                                                                                                  | `align-items: center; justify-content: center`. Add `flex` or `grid` since it doesn't set `display`                                                                    |
| `flex-row-center`                                                                                              | `display: flex; flex-direction: row; align-items: center`                                                                                                              |
| `justify-center-safe` / `justify-end-safe`                                                                     | `justify-content: safe center` / `safe flex-end`, so overflowing items stay reachable instead of clipping off-screen                                                   |
| `flex-row` / `flex-col` / `flex-row-reverse` / `flex-col-reverse`                                              | Set `flex-direction` plus the flow variables `--flex-direction`, `--flex-across`, `--flex-down`. The theme replaces Tailwind's own flex-direction utilities with these |
| `vars-row` / `vars-col`                                                                                        | Set only `--flex-across` / `--flex-down`, without touching `flex-direction`                                                                                            |
| `grid-stack`                                                                                                   | A one-cell grid. Every direct child gets `grid-area: 1/1`, so children layer on the z-axis while the parent stretches to fit the tallest one                           |
| `grid-stack-item`                                                                                              | `grid-area: 1/1` on the element itself, for children of some other grid                                                                                                |
| `area-[…]`                                                                                                     | `grid-area` with an arbitrary named area (`area-[content]`) or line numbers (`area-[1/1/-1/-1]`). There are no preset names                                            |
| `gap-layout` / `gap-x-layout` / `gap-y-layout`                                                                 | Gap from the layout gutter variables `--layout-gutter-x` / `--layout-gutter-y`                                                                                         |
| `gap-sm` / `gap-md` / `gap-lg`                                                                                 | Gap from the theme spacing settings: `row-gap: var(--raw-space-*)`, `column-gap: var(--root-space-*)`                                                                  |
| `p-layout`, `p{x\|y\|t\|b\|l\|r\|s\|e}-layout`                                                                 | Padding from the layout buffer variables `--layout-buffer-x` / `--layout-buffer-y`                                                                                     |
| `p-gutter`, `p{x\|y\|t\|b\|l\|r\|s\|e}-gutter`                                                                 | Padding from the layout gutter variables                                                                                                                               |
| `m-layout`, `m{x\|y\|t\|b\|l\|r\|s\|e}-layout`                                                                 | Margin from the layout buffer variables                                                                                                                                |
| `m-gutter`, `m{x\|y\|t\|b\|l\|r\|s\|e}-gutter`                                                                 | Margin from the layout gutter variables                                                                                                                                |
| `vars-content-align-{start\|center\|end}`                                                                      | Sets `--content-align` for the subtree (`-left` / `-right` are legacy aliases for start / end)                                                                         |
| `text-content-align`                                                                                           | `text-align: var(--content-align)`                                                                                                                                     |
| `items-content-align` / `justify-content-align` / `justify-self-content-align` / `justify-items-content-align` | Apply `var(--content-align)` to `align-items` / `justify-content` / `justify-self` / `justify-items`                                                                   |
| `items-content-gravity`                                                                                        | `align-items: var(--content-gravity)`                                                                                                                                  |
| `scroll-area-x` / `scroll-area-y`                                                                              | One-axis scroll region: overflow on that axis, contained overscroll, hidden scrollbars                                                                                 |

Buffer is the space outside content. Gutter is the space between content. Both come from the `--layout-*` variables and can be overridden by a section. Alignment uses two variables: `--content-align` controls the x axis (like `text-align`) and `--content-gravity` controls the y axis. Both take `start`, `center`, or `end`.

## Examples

### Centering content

Use `flex-row-center` for a horizontal row with vertically centered items, or `flex` with `flex-center` to center both axes:

```html
<button class="flex-row-center gap-r2">
  {% render 'core-icon', icon: 'stroke-chevron-left' %}
  {{ 'other.accessibility.prev' | t }}
</button>

<div class="flex flex-center h-screen-dynamic">…</div>
```

### Layout gaps

Use `gap-layout` to space children by the section's gutter:

```html
<div class="text-content flex flex-col gap-layout">
  {% content_for 'blocks' %}
</div>
```

The gap uses the merchant's spacing setting and any gutter override on the section.

### Stacking children

Use `grid-stack` to layer children in one grid cell:

```html
<div class="z-0 w-full grid-stack h-full">
  {% render 'core-background-image', image: before_image, class: 'z-0' %}
  {% render 'core-background-image', image: after_image, class: 'z-10' %}
</div>
```

Unlike `position: absolute`, the parent stretches to fit the tallest child instead of collapsing to zero height. The before/after slider and `core-section-background` both stack this way.

### Placing content in grid areas

Use `area-[…]` to place an element into a named grid area:

```html
<placement-content class="placement-content-flex text-content-align gap-layout area-[content]">
  {{ content }}
</placement-content>

<div class="placement-controls-flex gap-r4 area-[controls]">
  {{ controls }}
</div>
```

`core-placement-grid` uses `area-[1/1/-1/-1]` to make the content take the whole grid when there are no controls.

### Aligning content from a setting

Use `vars-content-align-{{ block.settings.content_align }}` on a wrapper, then the `*-content-align` helpers on descendants:

```liquid
<div class="flex flex-col gap-y-r2 text-content-align items-content-align vars-content-align-{{ block.settings.content_align }}">
  {{ content }}
</div>
```

Every `vars-*` class is safelisted in `tailwind.config.ts`. You can assemble the class name in Liquid without adding the literal elsewhere.

### Scroll areas

Use `scroll-area-y` for a vertical scroll region with hidden scrollbars:

```html
<div class="scroll-area-y">
  {{ submenu_items }}
</div>
```

Contained overscroll keeps the page behind a drawer from scrolling when the drawer reaches its end.

## Customizing

Gutter and buffer values come from the merchant's spacing settings and use the `--layout-*` variables. See [Global settings & local overrides](/core-concepts/settings-cascade.md) and [Scaling: size, space & rhythm](/core-concepts/scaling.md). Fixed gap steps use the `r1–r15` scale. See [Spacing](/reference/utilities/spacing.md).