How to make responsive cards like in spotify playlisy - css

Question

I want to create the same layout as on this page https://open.spotify.com/genre/made-for-x. How to want the playlist elements to shrink until they reach 100px and then to wrap and when the window is expanding to grow until they reach 200px and then to unwrap.

Answer 1

All you need to achieve this layout is CSS Grid. You don’t need media queries.
CSS Grid has this awesome property grid-template-columns which lets you define a fixed or dynamic number of columns.
Use repeat() with a value of auto-fit inside of grid-template-columns to say you want as many columns as will fit into the grid container.
Use minmax(100px, max-content) to say that your grid columns should be at least 100px, but never more than the max-content size of the elements inside the grid.
Then, set max-width: 200px on your image elements, which will effectively determine that max-content size, because the images are sitting inside the grid.
Here’s a working example:
:root {
background-color: #111;
}
body {
color: white;
}
ul {
list-style-type: none;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
gap: 24px;
}
.grid-item {
background-color: #333;
display: flex;
flex-direction: column;
}
.playlist-image {
max-width: 200px;
}
<ul class="grid-container">
<li class="grid-item">
<img
class="playlist-image"
src="https://picsum.photos/id/237/400"
alt="Doggy"
/>
<h3 class="playlist-name">Discover Weekly</h3>
</li>
<li class="grid-item">
<img
class="playlist-image"
src="https://picsum.photos/id/237/400"
alt="Doggy"
/>
<h3 class="playlist-name">Daily Mix 1</h3>
</li>
<li class="grid-item">
<img
class="playlist-image"
src="https://picsum.photos/id/237/400"
alt="Doggy"
/>
<h3 class="playlist-name">Daily Mix 2</h3>
</li>
<li class="grid-item">
<img
class="playlist-image"
src="https://picsum.photos/id/237/400"
alt="Doggy"
/>
<h3 class="playlist-name">Release Radar</h3>
</li>
<li class="grid-item">
<img
class="playlist-image"
src="https://picsum.photos/id/237/400"
alt="Doggy"
/>
<h3 class="playlist-name">Family Mix</h3>
</li>
</ul>

Answer 2

You may create specific css for each screen size using #media.
Have a look at https://developer.mozilla.org/fr/docs/Web/CSS/#media to learn how to use them.