Container

µContainer provides the .container and .container-fluid layout classes in µCSS. The container centers content horizontally and applies a responsive maximum width adapted to each breakpoint.

Usage #

Wrap the main content in an element with the .container class:

My content

Centered and width-constrained.

<main class="container">
    <h1>My content</h1>
    <p>Centered and width-constrained.</p>
</main>

.container — Constrained width #

The container is fluid (100%) on mobile, then constrained to a maximum width at each breakpoint:

Breakpoint Minimum width max-width
XS < 576px 100% (fluid)
SM ≥ 576px 510px
MD ≥ 768px 700px
LG ≥ 1024px 950px
XL ≥ 1280px 1200px
XXL ≥ 1536px 1450px

In fluid mode (< 576px), a horizontal padding of var(--mu-spacing) (1rem) is applied. From 576px onward, the padding is removed and the maximum width takes over.

.container-fluid — Full width #

The fluid container always occupies 100% of the width, with constant horizontal padding:

Full-width content with side padding.

<section class="container-fluid">
    <p>Full-width content with side padding.</p>
</section>

Typical page structure #

µCSS recommends the <body> > <header> + <main> + <footer> structure, each containing a .container:

<header>
<main>

Title

Main content.

<footer>

Footer content

<body>
    <header>
        <nav class="container">
            <ul><li><strong>My site</strong></li></ul>
            <ul><li><a href="#">Link</a></li></ul>
        </nav>
    </header>
    <main class="container">
        <h1>Title</h1>
        <p>Main content.</p>
    </main>
    <footer class="container">
        <p>Footer content</p>
    </footer>
</body>

The <body> > header, <body> > main, and <body> > footer elements receive a vertical padding of var(--mu-block-spacing-vertical).

CSS classes #

Class Description
.container Centers content with a responsive maximum width at each breakpoint. Fluid (100%) below 576px.
.container-fluid Always occupies 100% of the width with constant horizontal padding.

Customization #

The --mu-spacing variable (default: 1rem) controls the horizontal padding of the container in fluid mode:

:root {
    --mu-spacing: 1.5rem;
}

Accessibility #

  • The .container class is purely presentational and does not affect the semantic structure of the document.
  • Use semantic HTML elements (<header>, <main>, <footer>, <nav>) inside or around containers to ensure correct landmark navigation for assistive technologies.
  • The responsive maximum widths help maintain comfortable reading line lengths, which benefits all users including those with cognitive disabilities.

See also: Grid