A powerful Tailwind plugin that enhances responsive grid layouts with smart breakpoints and customizable patterns.
Auto-generates responsive grid patterns for mobile, tablet, and desktop sizes using your Tailwind config.
Define unique grid layouts with named templates that persist across breakpoints using intuitive syntax.
Automatic gutter spacing that scales with content and adjusts to maintain visual harmony across device sizes.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 my-8">
<div class="bg-rose-100 p-4 rounded-lg">Column 1</div>
<div class="bg-amber-100 p-4 rounded-lg">Column 2</div>
<div class="bg-rose-100 p-4 rounded-lg">Column 3</div>
</div>
Responsive grid that auto-scales with Tailwind breakpoints and adjusts automatically
Full integration with your Tailwind config and utility-first principles.
Process your grid classes with PostCSS for enhanced performance.
Easily extend functionality using optional modular plugins and extensions.
Type-safe API with optional configuration using advanced TypeScript features.
Vanilla JS compatibility with advanced layout capabilities and performance optimization.
npm install tailwindcss-grid-extended
Add to your tailwind.config.js
module.exports = {
plugins: [require('tailwindcss-grid-extended')]
}
<div class="grid layout-cols-12 auto-cols-fr gap-6">
<div class="col-span-3"...>Sidebar</div>
<div class="col-span-9"...>Content</div>
</div>
Bring your design system's grid capabilities to full power with smart, responsive, and modern layout tools.