Container

Provides a new approach to classic Container with a new utility class
grid-cols-container which utilizes grid and is inspired by Kevin Powell.

View Source

css

:root, :host {
  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
  --container-width: 80rem;
  --container-lg-width: 90rem;
  --container-padding: 5vw;
  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
}

.grid-cols-container {
  display: grid;
  grid-template-columns:
    [container-full-start] minmax(var(--container-padding), 1fr)
    [container-lg-start] minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2))
    [container-start] min(100% - (var(--container-padding) * 2), var(--container-width)) [container-end]
    minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2)) [container-lg-end]
    minmax(var(--container-padding), 1fr) [container-full-end];
}

:where(.grid-cols-container > *) {
  grid-column: container;
}

Example

Easy layout with grid

html

<body class="grid-cols-container gap-4">
  <header class="col-[container-full] grid-cols-container bg-slate-300">Header Full Width</header>
  <main>Content</main>
  <footer class="col-[container-lg]">Footer Breakout</footer>
</body>

In same cases classic approach is still handy, you can achieve that easily with w

html

<div class="w-[--container] mx-auto">
    Content
</div>

Container ​

Example ​

Container

Example