ToolsRail
Home
Shadow Generator
Tailwind Font Generator
About
Home
Shadow Generator
Tailwind Font Generator
About
Home
Tailwind Tools
Tailwind CSS Grid Generator
Create your perfect grid layout with Tailwind CSS classes
Grid Options
Enable Grid
Apply grid or inline-grid to enable grid layout
grid
inline-grid
Number of Columns
Set number of equal-width columns
Select columns
grid-cols-1
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-5
grid-cols-6
grid-cols-7
grid-cols-8
grid-cols-9
grid-cols-10
grid-cols-11
grid-cols-12
Custom Columns
Define custom column sizes (e.g. 200px 1fr 2fr)
Number of Rows
Set number of equal-height rows
Select rows
grid-rows-1
grid-rows-2
grid-rows-3
grid-rows-4
grid-rows-5
grid-rows-6
Custom Rows
Define custom row sizes (e.g. 100px auto 200px)
Grid Gap
Set spacing between grid items
Select gap
gap-0
gap-1
gap-2
gap-3
gap-4
gap-5
gap-6
gap-8
gap-10
gap-12
gap-16
Auto Flow
Control how auto-placed items flow in the grid
Default
grid-flow-row
grid-flow-col
grid-flow-row-dense
grid-flow-col-dense
Justify Items
Align grid items horizontally within their cells
Default
justify-items-start
justify-items-end
justify-items-center
justify-items-stretch
Align Items
Align grid items vertically within their cells
Default
items-start
items-end
items-center
items-stretch
Justify Content
Align grid content horizontally
Default
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
Align Content
Align grid content vertically
Default
content-start
content-end
content-center
content-between
content-around
content-evenly
Responsive Settings
Enable responsive grid properties at different breakpoints
sm: (640px+)
Default columns
sm:grid-cols-1
sm:grid-cols-2
sm:grid-cols-3
sm:grid-cols-4
sm:grid-cols-6
sm:grid-cols-12
Default gap
sm:gap-0
sm:gap-1
sm:gap-2
sm:gap-4
sm:gap-6
sm:gap-8
md: (768px+)
Default columns
md:grid-cols-1
md:grid-cols-2
md:grid-cols-3
md:grid-cols-4
md:grid-cols-6
md:grid-cols-12
Default gap
md:gap-0
md:gap-1
md:gap-2
md:gap-4
md:gap-6
md:gap-8
lg: (1024px+)
Default columns
lg:grid-cols-1
lg:grid-cols-2
lg:grid-cols-3
lg:grid-cols-4
lg:grid-cols-6
lg:grid-cols-12
Default gap
lg:gap-0
lg:gap-1
lg:gap-2
lg:gap-4
lg:gap-6
lg:gap-8
Grid Template Areas
Define named grid areas for layout
Debug Grid Overlay
Add visual overlay to help with grid alignment
Dark Mode Preview
Preview grid in dark mode
Live Preview
Add Item
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item Controls
Select Item
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Column Span
Default
col-span-1
col-span-2
col-span-3
col-span-4
col-span-5
col-span-6
col-span-full
Row Span
Default
row-span-1
row-span-2
row-span-3
row-span-4
row-span-5
row-span-6
row-span-full
Area Name
Generated Tailwind CSS Code
Copy Code