Container

Horizontally-centered wrapper with per-breakpoint max-width. Bounded from tablet upwards; full-bleed via .is-fluid.

Live

Default container: bounded by breakpoint

Resize your browser. The container's outer edge snaps to the breakpoint below, with a horizontal gutter applied at all sizes. 

<div class="container" style="border: 1px dashed var(--kc-doc-border); padding: 1rem;">
<p style="margin: 0;">
  Resize your browser. The container's outer edge snaps to the breakpoint
  below, with a horizontal gutter applied at all sizes.
</p>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-container')
);
Playground

.is-fluid: full bleed

No max-width applied. Useful for hero bands, ribbons, footers.

<div class="container is-fluid" style="border: 1px dashed var(--kc-doc-border); padding: 1rem;">
<p style="margin: 0;">No max-width applied. Useful for hero bands, ribbons, footers.</p>
</div>
@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-container')
);
Playground

Markup

markup
<!-- Centered with breakpoint-driven max-width. -->
<main class="container">
  <h1 class="title">Page title</h1>
  <p>Body content stays bounded at each breakpoint.</p>
</main>

<!-- Override max-width with .is-fluid for full-bleed sections. -->
<section class="container is-fluid">
  Edge-to-edge content within container's gutter.
</section>

Variables

VariableDefaultNotes
$selector'.container'Re-scope freely.
$gutter$global-gap (1rem)Horizontal padding inside the container.
$fluid-modifier'fluid'Modifier suffix; final selector .container.is-fluid.

Override example

app.scss
@use '@adnap/krysalicss/layout/container' with (
  $selector: '.layout',
  $gutter: 2rem,
  $fluid-modifier: 'wide',  // → .layout.is-wide
);

For the breakpoint sizes that drive max-width, see the breakpoints reference.