Tutorial
How to Center a Div
The ultimate guide to horizontal and vertical centering in CSS.
Read More →1. Basic Flex Wrap
Simple cards that wrap when there's not enough space.
Card 1
This card will wrap when screen gets smaller.
Card 2
Flexbox handles the layout automatically.
Card 3
No media queries needed for basic wrapping.
Card 4
Just flex-wrap: wrap and gap.
Card 5
Resize your browser to see it work!
.grid-1 {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
display: flex;
flex-wrap: wrap;
gap: 20px;
}
2. Responsive Cards (flex: 1 1 280px)
Cards grow and shrink automatically using
flex: 1 1 280px. Try resizing your browser.
📱 Fully Responsive
This card grows and shrinks with the screen.
💪 Flexible Width
Using flex: 1 1 280px means: can grow, can shrink, base width 280px.
📐 No Media Queries
The grid adjusts automatically!
🎯 Perfect for Dashboards
Works on any screen size.
.grid-2 {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.card-2 {
flex: 1 1 280px; /* grow, shrink, base width */
}
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.card-2 {
flex: 1 1 280px; /* grow, shrink, base width */
}
3. Product Cards (E-commerce Style)
Product grid with images, prices, and hover effects.
📱
Smartphone Pro
Latest model with amazing camera and battery life.
$699💻
Laptop Air
Lightweight, powerful, perfect for developers.
$999🎧
Wireless Earbuds
Noise cancellation, 24hr battery life.
$149⌚
Smart Watch
Track your fitness and notifications.
$249
.product-card {
flex: 1 1 280px;
min-width: 250px;
background: white;
border-radius: 12px;
overflow: hidden;
}
flex: 1 1 280px;
min-width: 250px;
background: white;
border-radius: 12px;
overflow: hidden;
}
4. Blog Post Cards
Blog layout with categories, titles, and read more links.
Flexbox
Flexbox: The Complete Guide
Master flexbox with practical examples and real projects.
Read More →
.grid-4 {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.blog-card {
flex: 1 1 300px;
}
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.blog-card {
flex: 1 1 300px;
}
5. Team Members Grid
Profile cards for team members with avatars and social links.
👩
Sarah Johnson
CEO & Founder
10+ years in tech leadership
👨
Mike Chen
Lead Developer
Full-stack expert
👩
Emma Davis
UI/UX Designer
Creating beautiful experiences
👨
Alex Rodriguez
Product Manager
Turning ideas into products
.grid-5 {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
6. Features Grid
Marketing site features with icons and descriptions.
Fast Performance
Optimized code that loads in milliseconds.
Secure
Enterprise-grade security built in.
Responsive
Works perfectly on all devices.
Customizable
Easy to adapt to your brand.
.grid-6 {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.feature-card {
flex: 1 1 250px;
}
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.feature-card {
flex: 1 1 250px;
}
7. Picture Gallery
Responsive image gallery that adjusts columns automatically.
🖼️ 1
🖼️ 2
🖼️ 3
🖼️ 4
🖼️ 5
🖼️ 6
🖼️ 7
🖼️ 8
.grid-7 {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.gallery-item {
flex: 1 1 calc(25% - 15px);
min-width: 150px;
}
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.gallery-item {
flex: 1 1 calc(25% - 15px);
min-width: 150px;
}
📚 Flexbox Wrap Properties Reference
/* Parent Container Properties for Grid Layouts */
display: flex; /* Enables flexbox */
flex-wrap: wrap; /* Allows items to wrap to next line */
gap: 20px; /* Space between items */
justify-content: center; /* Center the row (optional) */
/* Child Item Properties */
flex: 1 1 280px; /* grow, shrink, base width */
flex: 1; /* Take equal space */
min-width: 250px; /* Prevent cards from getting too small */
/* Common Patterns */
/* 3 columns on desktop, 2 on tablet, 1 on mobile */
.card {
flex: 1 1 300px;
min-width: 250px;
}
display: flex; /* Enables flexbox */
flex-wrap: wrap; /* Allows items to wrap to next line */
gap: 20px; /* Space between items */
justify-content: center; /* Center the row (optional) */
/* Child Item Properties */
flex: 1 1 280px; /* grow, shrink, base width */
flex: 1; /* Take equal space */
min-width: 250px; /* Prevent cards from getting too small */
/* Common Patterns */
/* 3 columns on desktop, 2 on tablet, 1 on mobile */
.card {
flex: 1 1 300px;
min-width: 250px;
}
🧠 Quick Quiz
Test your flexbox grid knowledge.
/* Question 1: What allows cards to wrap to the next line? */
/* Answer: flex-wrap: wrap */
/* Question 2: How do you make cards take equal space? */
/* Answer: flex: 1 1 0; or flex: 1; */
/* Question 3: How to prevent cards from getting too small? */
/* Answer: min-width: 250px; */
/* Question 4: What property adds space between cards? */
/* Answer: gap: 20px; */
/* Answer: flex-wrap: wrap */
/* Question 2: How do you make cards take equal space? */
/* Answer: flex: 1 1 0; or flex: 1; */
/* Question 3: How to prevent cards from getting too small? */
/* Answer: min-width: 250px; */
/* Question 4: What property adds space between cards? */
/* Answer: gap: 20px; */