DXB CSS

CSS Grid

grid-cols, col-span, row-span, gap — 강력한 그리드 레이아웃

Grid Columns

grid grid-cols-3 gap-3
1
2
3
grid grid-cols-4 gap-3
1
2
3
4

Column Span

col-span-2
col-span-2
1
1
col-span-full (전체 너비)
col-span-full
1
1
col-span-2

Dashboard Layout (복잡한 그리드)

Dashboard Header (col-span-4)
Sidebar
(col-span-1
row-span-2)
Main Content (col-span-2)
Widget
Stats (col-span-2)
Chart

Grid Auto Flow & Gap

grid-cols-3 gap-x-8 gap-y-3
A
B
C
D
E
F