Grid
Utilities that extend TailwindCSS grid with two additions:
grid-cols-container— a container layout built with grid, replacing the classic container classgrid-area-*— utilities for thegrid-areaproperty
Dependencies
- tailwindcss (TailwindCSS @utility)
Grid Cols Container
A modern approach to the classic Container — instead of wrapping content in a fixed-width element, the parent becomes a grid with named column lines and children are placed into the center column automatically. Inspired by Kevin Powell.
Available column lines:
container— content width, children are placed here by defaultcontainer-breakout— slightly wider than the content width, for elements that should stand outcontainer-full— full viewport width
The container is configured via CSS variables — --container-width (default 80rem), --container-breakout-width (default --container-width + 10rem) and --container-padding (default 5vw).
@import "winduum/tailwindcss/utilities/grid-cols-container.css";Example
<body class="grid grid-cols-container gap-4">
<header class="col-[container-full] grid grid-cols-container">Header Full Width</header>
<main>Content in container</main>
<footer class="col-[container-breakout]">Footer Breakout</footer>
</body>In some cases the classic approach is still handy, you can achieve that easily with w-[--container]
<div class="w-[--container] mx-auto">
Content
</div>Grid Area
Utilities for the grid-area property — place elements into named or numbered grid areas.
grid-area-full—grid-area: 1/-1, useful for stacking elements on top of each othergrid-area-*— a row number or an arbitrary value, e.g.grid-area-[banner]
@import "winduum/tailwindcss/utilities/grid-area.css";Example
Stack elements on top of each other without absolute positioning:
<div class="grid">
<img class="grid-area-full" src="image.jpg" alt="">
<div class="grid-area-full self-end">Caption</div>
</div>.grid-area-full {
grid-area: 1/-1;
}or place elements into a named area
<div class="grid grid-template-areas-[banner]">
<div class="grid-area-[banner]">Banner</div>
</div>.grid-area-\[banner\] {
grid-area: banner;
}