Container
Centres the content of a page and keeps it from stretching to the full width of a wide screen.
Four widths
data-size sets the widest the container grows. The
preview is only as wide as this page, so the larger ones fill it;
on a wide screen they stop at their own width and centre.
<div class="stack">
<div class="container" data-size="sm"><div class="card"><section>sm: 36rem</section></div></div>
<div class="container" data-size="md"><div class="card"><section>md: 48rem</section></div></div>
<div class="container"><div class="card"><section>default: 64rem</section></div></div>
<div class="container" data-size="xl"><div class="card"><section>xl: 80rem</section></div></div>
</div>A page
Put the page content in one container: a page header and cards
on a form page, a dashboard in xl. On a small screen
it has a gutter at the sides.
Set up your store
Four short steps.
<main class="container" data-size="md">
<header class="page-header">
<div>
<h1>Set up your store</h1>
<p>Four short steps.</p>
</div>
</header>
<div class="card">
<section>The form goes here.</section>
</div>
</main>With a Workspace
Inside a .workspace the main already has
padding, so a container directly in it adds none and only limits
the width and centres.
Attributes
| Attribute | Values | Description |
|---|---|---|
.container |
on any element | Full width up to 64rem, centred, with a gutter of 16px at the sides. |
data-size |
sm 36rem, md 48rem, xl 80rem (none = 64rem) |
The widest the container grows. sm suits a sign-in or a short form, xl a dashboard or a wide table. |