Aspect Square aspect-square
Set elements to maintain a perfect 1:1 aspect ratio, creating square containers that scale proportionally.
Live Examples
Basic Square Container
1:1 Ratio
<div class="w-48 aspect-square bg-gradient-to-br from-green-400 to-emerald-600">
Square content
</div> Responsive Square Grid
1
2
3
<div class="grid grid-cols-3 gap-2">
<div class="aspect-square bg-green-500">1</div>
<div class="aspect-square bg-emerald-500">2</div>
</div> Square Image Container
Image
<div class="w-32 aspect-square overflow-hidden">
<img class="w-full h-full object-cover" src="...">
</div> Avatar Grid
<div class="w-12 aspect-square bg-gradient-to-br from-pink-400 to-red-500 rounded-full"></div> Common Use Cases
🖼️ Image Galleries
Create uniform image grids where all photos display as perfect squares regardless of original dimensions.
👤 Profile Avatars
Ensure all user avatars maintain consistent square proportions for clean, organized layouts.
🎮 Game Boards
Build grid-based games like tic-tac-toe, chess, or puzzle games with perfect square cells.
📱 App Icons
Design app icon grids that maintain consistent square shapes across different screen sizes.
🏷️ Product Cards
Create uniform product displays in e-commerce grids with consistent square thumbnails.
📊 Dashboard Widgets
Build dashboard components that maintain square proportions for visual consistency.
Best Practices & Tips
✅ Do
- • Use with responsive width classes for flexible layouts
- • Combine with object-cover for images
- • Apply to containers, not direct image elements
- • Test across different screen sizes
- • Use with grid systems for consistent spacing
❌ Don't
- • Apply to elements with fixed heights
- • Use without considering content overflow
- • Forget to handle text content properly
- • Mix with conflicting aspect ratio classes
- • Ignore accessibility for interactive squares