CSS Grid

Create responsive CSS grid that changes the number of columns upon resizing.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
    align-items: center;
    gap: 1rem;
}

<h1>Photo Gallery</h1>
<div class="grid-container">
    <img width="200px" src="https://picsum.photos/300/300" />
    <img width="200px" src="https://picsum.photos/300/300" />
    <img width="200px" src="https://picsum.photos/300/300" />
    <img width="200px" src="https://picsum.photos/300/300" />
    <img width="200px" src="https://picsum.photos/300/300" />
    <img width="200px" src="https://picsum.photos/300/300" />
</div>