Medium Breakpoint md:
Apply styles at the medium breakpoint (768px and above) for tablet landscape and desktop layouts.
Quick Reference
Breakpoint Details
Usage Examples
md:grid-cols-3md:text-xlmd:flex-rowmd:px-8Interactive Examples
Three Column Layout
Feature 1
1 col mobile, 2 col tablet, 3 col desktop
Feature 2
Progressive enhancement across breakpoints
Feature 3
Optimal layout for each screen size
Feature 4
Clean three-column grid on md+
Feature 5
Responsive grid system in action
Feature 6
Perfect for feature showcases
✓ 1 column on mobile (< 640px)
✓ 2 columns on sm (640px - 767px)
✓ 3 columns on md and above (≥ 768px)
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
<div>Feature 1</div>
<div>Feature 2</div>
<div>Feature 3</div>
</div> Sidebar Layout
Main Content
This layout stacks vertically on mobile and tablets, then becomes a horizontal sidebar layout on md+ screens. The sidebar takes 1/4 width and main content takes 3/4 width.
✓ Stacked layout on mobile and small tablets
✓ Horizontal sidebar layout on md+ (≥ 768px)
Enhanced Typography
Progressive Heading
Secondary Heading
This paragraph demonstrates progressive typography enhancement. Text starts small on mobile, grows to base size on tablets, and becomes large on desktop for optimal readability across all devices.
✓ Typography scales progressively across breakpoints
✓ Optimal reading experience on each device type
Navigation Enhancement
✓ Vertical stack on mobile and small tablets
✓ Horizontal navigation bar on md+ screens
Common MD Breakpoint Use Cases
📊 Three-Column Layouts
Perfect breakpoint for introducing three-column grids and layouts.
grid-cols-2 md:grid-cols-3 📱➡️💻 Sidebar Layouts
Transform stacked content into sidebar + main content layouts.
flex-col md:flex-row 🎯 Navigation Bars
Switch from mobile hamburger menus to horizontal navigation.
hidden md:flex 📝 Enhanced Typography
Increase text sizes for better readability on larger screens.
text-base md:text-lg 🖼️ Image Galleries
Create more sophisticated image grid layouts.
grid-cols-2 md:grid-cols-4 📏 Generous Spacing
Add more padding and margins for desktop-appropriate spacing.
p-6 md:p-8 MD Breakpoint Strategy
Desktop Transition Point
Why 768px Matters
- • iPad landscape orientation (768px)
- • Small laptop screens
- • Transition from touch to mouse/trackpad
- • More horizontal space for complex layouts
Layout Opportunities
- • Multi-column content layouts
- • Horizontal navigation patterns
- • Sidebar + main content combinations
- • Enhanced typography hierarchy
Target Devices & Contexts
📱 SM Range (640-767px)
- • Small tablets portrait
- • Large phones landscape
- • Limited horizontal space
- • Touch-first interaction
💻 MD+ (≥ 768px)
- • Tablets landscape
- • Laptop and desktop screens
- • Mouse/trackpad interaction
- • Complex layout possibilities
Best Practices
✅ Do
- • Use
md:grid-cols-3for three-column layouts - • Implement horizontal navigation:
md:flex-row - • Enhance typography:
text-base md:text-lg - • Add generous spacing:
p-6 md:p-8 - • Test on iPad landscape and small laptops
- • Consider both touch and mouse interactions
❌ Don't
- • Create layouts that only work on large screens
- • Make touch targets too small for tablet users
- • Ignore the transition from sm to md breakpoints
- • Use complex grids that break on smaller laptops
- • Forget about tablet landscape orientation
- • Make text too large for comfortable reading