Grid Layout
CSS Grid ក្នុង Tailwind
Grid layout សម្រាប់ 2D layouts។ CSS Grid គឺជា layout system ដ៏មានឥទ្ធិពលបំផុតសម្រាប់បង្កើត complex layouts ជាមួយ rows និង columns។
🎯 អ្វីទៅជា CSS Grid?
CSS Grid Layout គឺជា 2-dimensional layout system:
| Feature | Description |
|---|---|
| 📐 2D Layout | Control both rows AND columns simultaneously |
| 🎨 Precise Control | Exact placement of items in grid cells |
| 🧩 Spanning | Items can span multiple rows/columns |
| 📱 Responsive | Easy responsive changes (1 col → 3 cols) |
| ↔️ Gap Control | Built-in spacing between grid items |
📊 Grid Template Columns
Tailwind ផ្តល់ grid column templates ពី 1-12:
| Class | CSS Value | Visual | Use Case |
|---|---|---|---|
grid-cols-1 |
repeat(1, minmax(0, 1fr)) | [____Full Width____] | Mobile layouts, single column |
grid-cols-2 |
repeat(2, minmax(0, 1fr)) | [__Half__][__Half__] | 2-column layouts, side-by-side |
grid-cols-3 |
repeat(3, minmax(0, 1fr)) | [_Third_][_Third_][_Third_] | Card grids, feature sections |
grid-cols-4 |
repeat(4, minmax(0, 1fr)) | [__][__][__][__] | Product grids, image galleries |
grid-cols-6 |
repeat(6, minmax(0, 1fr)) | [_][_][_][_][_][_] | Calendar, icon grids |
grid-cols-12 |
repeat(12, minmax(0, 1fr)) | [][][][][][][][][][][] | Bootstrap-style grid system |
grid-cols-none |
none | No grid template | Reset grid |
📏 Grid Template Rows
| Class | CSS Value | Use Case |
|---|---|---|
grid-rows-1 |
repeat(1, minmax(0, 1fr)) | Single row |
grid-rows-2 |
repeat(2, minmax(0, 1fr)) | Two equal rows |
grid-rows-3 |
repeat(3, minmax(0, 1fr)) | Three rows (header, main, footer) |
grid-rows-6 |
repeat(6, minmax(0, 1fr)) | Multiple rows |
🎯 Column Span
ធាតុអាច span ពី column មួយទៅច្រើន:
| Class | CSS | Visual (in 6-col grid) | Use Case |
|---|---|---|---|
col-span-1 |
grid-column: span 1 | [X][ ][ ][ ][ ][ ] | Single column (default) |
col-span-2 |
grid-column: span 2 | [___X___][ ][ ][ ] | Span 2 columns |
col-span-3 |
grid-column: span 3 | [_______X_______][ ] | Half width (in 6-col grid) |
col-span-4 |
grid-column: span 4 | [___________X___________] | 2/3 width (in 6-col grid) |
col-span-6 |
grid-column: span 6 | [___________X___________] | Full width |
col-span-12 |
grid-column: span 12 | [__________Full__________] | Full width (12-col system) |
col-span-full |
grid-column: 1 / -1 | [__________Full__________] | Span all columns (dynamic) |
📏 Row Span
| Class | CSS | Use Case |
|---|---|---|
row-span-1 |
grid-row: span 1 | Single row (default) |
row-span-2 |
grid-row: span 2 | Tall item (2 rows) |
row-span-3 |
grid-row: span 3 | Sidebar spanning 3 rows |
row-span-full |
grid-row: 1 / -1 | Span all rows |
📐 Grid Gap
| Class | Size | Use Case |
|---|---|---|
gap-0 |
0px | No spacing (seamless grid) |
gap-2 |
0.5rem (8px) | Tight spacing |
gap-4 |
1rem (16px) | Default spacing (most common) |
gap-6 |
1.5rem (24px) | Comfortable spacing |
gap-8 |
2rem (32px) | Large spacing (cards) |
gap-x-4 gap-y-8 |
Different X/Y | Horizontal ≠ vertical spacing |
🔄 Grid Auto Flow
| Class | Behavior | Use Case |
|---|---|---|
grid-flow-row |
Fill rows first (default) | Normal horizontal flow |
grid-flow-col |
Fill columns first | Vertical flow |
grid-flow-dense |
Fill gaps (tight packing) | Masonry-like layout |
grid-flow-row-dense |
Row flow + fill gaps | Efficient card layouts |
🎯 Common Grid Patterns
| Pattern | Classes | Purpose |
|---|---|---|
| Card Grid | grid grid-cols-1 md:grid-cols-3 gap-6 |
Responsive 3-column cards |
| Image Gallery | grid grid-cols-2 md:grid-cols-4 gap-2 |
Photo grid (2 cols → 4 cols) |
| Dashboard | grid grid-cols-12 gap-4 |
12-column layout (flexible widths) |
| Sidebar Layout | grid grid-cols-4 + col-span-1 + col-span-3 |
1/4 sidebar + 3/4 main |
| Hero Section | grid grid-cols-2 gap-8 items-center |
Text + image side by side |
| Feature Grid | grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 |
1 → 2 → 3 columns responsive |
📱 Responsive Grid Patterns
| Layout | Mobile | Tablet | Desktop | Classes |
|---|---|---|---|---|
| Product Grid | 1 col | 2 cols | 4 cols | grid-cols-1 md:grid-cols-2 lg:grid-cols-4 |
| Blog Posts | 1 col | 2 cols | 3 cols | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Dashboard | 1 col | 12 col | 12 col | grid-cols-1 md:grid-cols-12 |
🆚 Grid vs Flexbox Comparison
| Aspect | Grid | Flexbox |
|---|---|---|
| Dimension | 2D (rows AND columns) | 1D (row OR column) |
| Best For | Page layouts, card grids | Navbar, button groups, centering |
| Item Placement | Precise control (span, position) | Sequential flow |
| Spacing | gap (uniform) | gap or margin |
| Responsive | Change column count | Wrap, direction change |
| Alignment | justify-items, align-items | justify-content, align-items |
| Browser Support | Modern browsers (IE11+) | Excellent (all modern) |
✅ Grid Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use grid-cols-12 for flexible layouts | Use grid-cols-7 or odd numbers (hard to divide) |
| Use gap for spacing (clean, uniform) | Add margin to individual grid items |
| Start mobile-first: grid-cols-1 md:grid-cols-3 | Design desktop-first (breaks mobile) |
| Use col-span for featured items | Make all items same size (boring) |
| Test with varying content heights | Assume all items same height |
| Use grid for 2D layouts (rows × columns) | Use grid for simple 1D layouts (use Flexbox) |
| Combine with items-center for alignment | Forget vertical alignment |
🎨 Advanced Grid Techniques
| Technique | Classes | Use Case |
|---|---|---|
| Auto-fit Columns | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
Dynamic responsive columns |
| Nested Grids | Grid inside grid | Complex layouts |
| Grid + Flexbox | Grid for layout, Flex for items | Combine both systems |
| Asymmetric Layouts | Different col-span values | Magazine-style layouts |
Grid Columns & Rows
ឧទាហរណ៍ grid spanning ដែលធាតុ span ពី column/row មួយទៅច្រើន ដើម្បីបង្កើត complex layouts។