DevTool Kits

Grid Layout Generator

Create powerful CSS Grid layouts with Tailwind CSS classes

Grid Configuration
Configure your grid layout and items
0px64px
C1
C2
C3
R1
R2
R3
Live Preview
Interactive preview of your CSS Grid layout
Preview Mode:
3×3 grid
Header
Sidebar
Main Content
Footer
Empty
Empty
Empty
Empty
Empty
> 1024px

Grid Structure

Columns:
11fr
21fr
31fr
Rows:
11fr
21fr
31fr

All Responsive Breakpoints

Desktop (lg: 1024px+)- Current main view
Tablet (md: 768px+)
Header
Sidebar
Main Content
Footer
Mobile (sm: 640px+)
Header
Sidebar
Main Content
Generated Code
Copy the generated CSS and Tailwind classes
Ready-to-use Tailwind CSS classes
<div class="grid grid-cols-3 grid-rows-3 gap-4 sm:grid-cols-1 sm:gap-2 md:grid-cols-2 md:gap-3 lg:grid-cols-3 lg:gap-4">
  <div class="col-span-3 col-start-1 row-start-1 bg-primary/20 p-4 rounded-lg border">
    Header
  </div>
  <div class="col-start-1 row-start-2 bg-secondary/20 p-4 rounded-lg border">
    Sidebar
  </div>
  <div class="col-span-2 col-start-2 row-start-2 bg-accent/20 p-4 rounded-lg border">
    Main Content
  </div>
  <div class="col-span-3 col-start-1 row-start-3 bg-muted/40 p-4 rounded-lg border">
    Footer
  </div>
</div>