This is great for creating galleries. They are responsive by nature and you can avoid tinkering with media queries 😀
CSS
.gallery-container
{
/* responsive by nature */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* auto-fit = stretch items in grid */
/* 1fr = max width of grid */
grid-gap: 20px;
}
HTML
<div class="gallery-container">
<div>item #1</div>
<div>item #2</div>
<div>item #3</div>
</div>
EXAMPLE
Here are some example of this in action:
