> Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

---
title: Layout
description: Control the page layout, grid width, and page modes.
icon: arrow-left-right
---

## Page modes

Every page can set a **mode** in its frontmatter to control how much of the editorial layout is rendered.

| Mode      | Left sidebar | Right aside | Editorial grid | Use case                      |
| --------- | ------------ | ----------- | -------------- | ----------------------------- |
| `default` | Yes          | Yes         | Yes            | Standard docs pages           |
| `center`  | No           | Yes         | Yes (2-column) | Focused content without nav   |
| `custom`  | No           | No          | No             | Landing pages, custom layouts |

`wide` and `frame` are accepted for Mintlify compatibility and alias to `default`.

### Custom mode

Set `mode: "custom"` to strip the editorial layout entirely. Only the **navbar**, **tab bar**, **footer**, and **mobile navigation** are rendered. The content area is a plain container where you control everything with your own HTML and Tailwind classes.

```yaml
---
mode: "custom"
---
```

This is useful for landing pages, pricing pages, or any page where you want full control over the layout. Standard MDX components like code blocks, callouts, and icons still work inside custom pages.

### `maxWidth`

Use the `maxWidth` frontmatter field to constrain the content container width in pixels. The navbar stays full-width; only the content area is narrowed and centered.

```yaml
---
mode: "custom"
maxWidth: 700
---
```

### Example landing page

```mdx
---
mode: "custom"
maxWidth: 800
---

<div className="flex flex-col items-center py-24 gap-6 text-center">

<h1 className="text-5xl font-bold tracking-tight">
  Your Product Name
</h1>

<p className="text-lg text-muted-foreground max-w-xl">
  A short description of what your product does and why it matters.
</p>

<a href="./quickstart" className="no-underline rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground">
  Get Started
</a>

</div>
```

## Full-width layout

By default Holocron caps the page grid at **1200px**. The left sidebar, content column, and right sidebar all live inside that constraint.

You can make the layout span the full viewport by overriding a single CSS variable.

## Override `--grid-max-width`

In your `style.css` file (see [Custom CSS](/docs/customize/custom-css)):

```css
/* style.css */
:root {
  --grid-max-width: 2600px;
}
```

This pushes the left and right sidebars toward the screen edges. The content column grows to fill the extra space, up to its **720px** cap. Any remaining width is distributed as gap between the three columns.

```
Default (1200px max)
┌────────────────────────────────────────────────────────────────────────────┐
│              ┌───────┐    ┌──────────────┐    ┌───────┐                    │
│              │  nav  │    │   content    │    │ aside │                    │
│              └───────┘    └──────────────┘    └───────┘                    │
└────────────────────────────────────────────────────────────────────────────┘

Full-width (2600px max)
┌──────────────────────────────────────────────────────────────────────────────────────────┐
│ ┌───────┐                        ┌──────────────┐                        ┌───────┐       │
│ │  nav  │                        │   content    │                        │ aside │       │
│ └───────┘                        └──────────────┘                        └───────┘       │
└──────────────────────────────────────────────────────────────────────────────────────────┘
```

## How the grid works

Holocron's page grid is controlled by four CSS variables:

| Variable               | Default  | Description                      |
| ---------------------- | -------- | -------------------------------- |
| `--grid-max-width`     | `1200px` | Overall page cap                 |
| `--grid-nav-width`     | `230px`  | Left sidebar (table of contents) |
| `--grid-sidebar-width` | `230px`  | Right sidebar (aside content)    |
| `--grid-gap`           | `60px`   | Gap between columns              |

The **content column width** is derived automatically:

```
content = min(720px, max-width - nav - sidebar - 2 × gap)
```

This means increasing `--grid-max-width` does not make the content column infinitely wide. It grows until it hits the 720px cap, then the extra space becomes gap.

## Aside height and section spacing

A non-full `<Aside>` shares its vertical space with the section it belongs to (the content between two headings). The section row expands to fit whichever is taller: the main content or the aside. If the aside callout is taller than the section text, you will see extra whitespace below the main content.

To avoid this, keep aside callouts **short** and only place them in sections with enough body text to match or exceed the aside height.

## True edge-to-edge

If you want the grid to always fill the viewport regardless of screen size, use `100vw`:

```css
/* style.css */
:root {
  --grid-max-width: 100vw;
}
```

This removes the max-width constraint entirely. The grid stretches on every screen.