# Container

How wide a page, a column of text and a part may be, and how a part answers to the space it is in rather than to the screen.

Foundation · Free · https://tactileui.dev/docs/foundations/container

## Three widths

- **A page**: up to 1280px, centred, 32px of side padding (16px on a phone)
- **A column of text**: up to 68 characters (`68ch`), however wide the page
- **A form or a panel in a column**: up to 460px

```
.page { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.prose { max-width: 68ch; }
```

The side padding belongs to the container, so a full-width band can sit outside it and still line up with the content above and below.

## Parts answer to their container

A part that may sit in a sidebar, a dialog or a full page cannot know the width of the screen, so it asks the width of the space it is in. Mark the wrapper with `container-type: inline-size` and write the narrow rules as `@container` queries. Pages still answer to the viewport.

Berth A4Skerry, 9.4 m

```
.card-wrap { container-type: inline-size; }
.card { display: grid; grid-template-columns: 1fr auto; gap: var(--tui-3); }
@container (max-width: 360px) { .card { grid-template-columns: 1fr; } }
```

## Rules

- Centre the page with `margin-inline: auto`, not with a wrapper of a fixed width.
- Keep text to about 68 characters a line, even in a wide column.
- A container never scrolls sideways at 390px. If a child is wider, the child scrolls inside itself.
- Container queries for parts, media queries for the page.

## The full law

This page is a summary in plain words. The brain holds the law itself, in `grid-and-spacing.md`, written for an agent to follow. It ships with the Kit.