Layout

Containers

The .container class centers content, adds horizontal gutters, and limits the content width.

Usage

.container: Centers content within the default page width.
.container.slim: Limits content to a narrower width for long-form reading.
.container.full: Extends content to the full viewport width.

The following examples show the default, full-width, and slim containers:

<body>
  <main class="container">
    ...
  </main>
</body>

<body>
  <main class="full container">
    ...
  </main>
</body>

<body>
  <main class="slim container">
    ...
  </main>
</body>

Customize container widths

Default container width (--main-width):
Slim container width (--content-width):

Implementation reference

The container implementation uses the flexible wrapper technique described in Use CSS clamp() to create a more flexible wrapper utility.