CSS
Create a Responsive Card Layout with Flexbox Wrapping
Build a dynamic and responsive card or gallery layout using CSS Flexbox. Leverage `flex-wrap` and `gap` to automatically arrange items and adapt to screen size.
.flex-card-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
justify-content: center; /* Centers items when not filling a full row */
gap: 20px; /* Spacing between cards */
padding: 20px;
background-color: #eef;
}
.card {
flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
min-width: 280px; /* Ensure a minimum width before shrinking further */
max-width: 100%; /* Prevent card from exceeding container width */
box-sizing: border-box; /* Include padding and border in element's total width and height */
padding: 20px;
background-color: white;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
How it works: This snippet demonstrates how to create a responsive, wrapping card layout using CSS Flexbox. By setting `display: flex` and `flex-wrap: wrap` on the container, items automatically flow to the next line when space runs out. The `gap` property provides consistent spacing between cards. Each `.card` uses `flex: 1 1 300px;` where `flex-basis` (300px) suggests an ideal width, and `flex-grow: 1` allows cards to expand to fill available space in a row, while `flex-shrink: 1` allows them to shrink. `justify-content: center` helps distribute remaining space if a row isn't fully filled.