Beta
Codophile is currently in active development. Features may change rapidly! 🚀
Codophile
K
Playground
Templates
Effects
Docs
About
Get Started
Back to Tailwind
Tailwind Grid Layout
Master grid layouts using Tailwind utility classes.
Container
Items
Grid Template
Grid Cols
grid-cols-1
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-5
grid-cols-6
grid-cols-12
grid-cols-none
Grid Rows
grid-rows-1
grid-rows-2
grid-rows-3
grid-rows-4
grid-rows-5
grid-rows-6
grid-rows-none
Gap
gap-0
gap-1
gap-2
gap-4
gap-8
gap-12
Items Alignment
Justify Items
justify-items-start
justify-items-end
justify-items-center
justify-items-stretch
Align Items
items-start
items-end
items-center
items-stretch
Content Alignment
Justify Content
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
Align Content
content-start
content-end
content-center
content-between
content-around
content-evenly
+
Add Box
-
Remove Box
Reset All
Grid Container Preview
6 Items
1
2
3
4
5
6
Container Classes
Copy Code
grid grid-cols-3 grid-rows-3 gap-4 justify-items-stretch items-stretch justify-start content-start w-full h-full min-h-[300px] p-4 overflow-auto border border-white/10 rounded-lg
