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

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

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

Example

Easy layout with grid

html

<body class="grid grid-cols-container gap-4">
  <header class="col-[container-full] grid grid-cols-container bg-slate-300">Header Full Width</header>
  <main>Content in container</main>
  <footer class="col-[container-breakout]">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