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:

Mon contenu

Centre et contraint en largeur.

<main class="container">
    <h1>Mon contenu</h1>
    <p>Centre et contraint en largeur.</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:

Contenu pleine largeur avec marges laterales.

<section class="container-fluid">
    <p>Contenu pleine largeur avec marges laterales.</p>
</section>

Typical page structure

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

<header>
<main>

Titre

Contenu principal.

<footer>

Pied de page

<body>
    <header>
        <nav class="container">
            <ul><li><strong>Mon site</strong></li></ul>
            <ul><li><a href="#">Lien</a></li></ul>
        </nav>
    </header>
    <main class="container">
        <h1>Titre</h1>
        <p>Contenu principal.</p>
    </main>
    <footer class="container">
        <p>Pied de page</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