CSS
Flexbox: Responsive Image Gallery with Flexible Items
Build a dynamic image gallery using Flexbox, where items wrap and adjust their sizes responsively based on `flex-basis` and `flex-grow` to fill rows.
.gallery-container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
gap: 15px; /* Spacing between gallery items */
padding: 15px;
background-color: #f9f9f9;
}
.gallery-item {
flex: 1 1 200px; /* Grow, shrink, and have a preferred width of 200px */
/*
* flex: 1 means it will grow to fill space.
* flex: 1 means it can shrink if necessary.
* flex-basis: 200px means it prefers to be 200px wide before growing/shrinking.
*/
min-width: 150px; /* Ensure items don't get too small */
max-width: 300px; /* Optional: prevent items from becoming too wide */
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
text-align: center;
background-color: #fff;
}
.gallery-item img {
width: 100%;
height: 150px; /* Fixed height for visual consistency */
object-fit: cover; /* Crop images to fit */
display: block;
}
.gallery-item-caption {
padding: 10px;
font-size: 0.9em;
color: #333;
}
/* Adjust flex-basis for larger items or different default sizes */
.gallery-item.large {
flex-basis: 350px; /* A larger preferred width for specific items */
}
body { margin: 0; font-family: sans-serif; }
/* HTML Structure */
/*
<div class="gallery-container">
<div class="gallery-item">
<img src="https://via.placeholder.com/200x150?text=Image+1" alt="Image 1">
<p class="gallery-item-caption">Beautiful Landscape</p>
</div>
<div class="gallery-item large">
<img src="https://via.placeholder.com/350x150?text=Image+2" alt="Image 2">
<p class="gallery-item-caption">Cityscape View</p>
</div>
<div class="gallery-item">
<img src="https://via.placeholder.com/200x150?text=Image+3" alt="Image 3">
<p class="gallery-item-caption">Abstract Art</p>
</div>
<div class="gallery-item">
<img src="https://via.placeholder.com/200x150?text=Image+4" alt="Image 4">
<p class="gallery-item-caption">Mountain Scene</p>
</div>
<div class="gallery-item large">
<img src="https://via.placeholder.com/350x150?text=Image+5" alt="Image 5">
<p class="gallery-item-caption">Ocean Sunset</p>
</div>
<div class="gallery-item">
<img src="https://via.placeholder.com/200x150?text=Image+6" alt="Image 6">
<p class="gallery-item-caption">Forest Path</p>
</div>
<div class="gallery-item">
<img src="https://via.placeholder.com/200x150?text=Image+7" alt="Image 7">
<p class="gallery-item-caption">Desert Dunes</p>
</div>
</div>
*/
How it works: The `.gallery-container` uses `display: flex` and `flex-wrap: wrap` to allow items to flow onto new lines. The `gap` property provides spacing. Each `.gallery-item` has `flex: 1 1 200px;`. This means items will `grow` (`flex-grow: 1`) and `shrink` (`flex-shrink: 1`) to fit the available space, but prefer to be `200px` wide (`flex-basis`). If there's extra space, items on the same line will expand to fill it. If the space is tight, they'll shrink. When the total preferred width of items exceeds the container's width, they wrap. The `.large` modifier demonstrates how different `flex-basis` values can create items of varying "preferred" widths, which then still flex to fill rows.