Desktop Layouts: Tận Dụng Không Gian Lớn
Desktop có nhiều không gian hơn = nhiều cơ hội hơn. Nhưng cũng dễ làm quá phức tạp.
Multi-Column Layouts
Dashboard Layout:
Dashboard layout với sidebar:
Desktop (lg+):
- Fixed sidebar: w-64, h-screen sticky
- Main content: flex-1, overflow-auto
- Optional right panel: w-80
Tablet (md):
- Collapsible sidebar: icons only (w-16)
- Main content: full width
Mobile:
- Sidebar thành bottom navigation
- Hoặc hidden, hamburger menu
Grid Systems
Complex Grid:
Bento grid layout:
Sử dụng CSS Grid với mixed sizes:
grid-template-columns: repeat(4, 1fr)
grid-template-rows: masonry hoặc fixed heights
Featured item: col-span-2 row-span-2
Regular items: col-span-1 row-span-1
Wide item: col-span-2 row-span-1
Gap: gap-6
Responsive: 4 cols → 2 cols → 1 col
Data Tables
Responsive data table:
Desktop:
- Full table với all columns
- Sortable headers
- Row hover states
- Inline actions
Mobile options:
1. Horizontal scroll trong container
2. Card layout thay table
3. Priority columns (hide less important)
Prompt: "Chuyển table này thành card layout trên mobile,
giữ 3 columns quan trọng nhất visible"
Split Views
Split view pattern:
Master-detail layout:
- Left: list/navigation (w-1/3)
- Right: content/detail (w-2/3)
Responsive:
- Desktop: side by side
- Tablet: drawer từ left
- Mobile: separate pages với navigation
Divider: resize handle cho desktop
Form Layouts
Multi-column form:
Desktop:
- 2-column grid cho related fields
- Name fields side by side
- Address: city | state | zip
- Actions stick to bottom
Mobile:
- Single column, full width fields
- Progressive disclosure (sections)
- Sticky submit button bottom
grid grid-cols-1 md:grid-cols-2 gap-6
Content Width
Optimal reading width:
- Prose content: max-w-prose (65ch)
- Forms: max-w-md hoặc max-w-lg
- Dashboard: max-w-7xl
- Full-width: container breakout sections
Center với: mx-auto
Side padding: px-4 sm:px-6 lg:px-8
Desktop-Only Features
Features chỉ available trên desktop:
- Keyboard shortcuts (show hint tooltip)
- Right-click context menus
- Drag and drop
- Multi-select với Shift+Click
- Hover previews
- Resize panels
Prompt: "Add keyboard shortcut hints như Cmd+K,
visible trong tooltips khi hover"
Pro Tips
| Tip | Implementation |
|---|---|
| Utilize hover | Rich hover cards, previews |
| Keyboard nav | Focus management, shortcuts |
| Dense data | Tables, dashboards, kanban |
| Multi-tasking | Split views, floating panels |
💡 Remember: Desktop có hover và keyboard. LeverageTrong these mà mobile không có.