It often happens that a set of cards needs to be made responsive, here is a simple solution:
https://codepen.io/maurerkrisztian/pen/dymeBmr
class="container">
class="element">1
class="element">2
class="element">3
class="element">4
:root {
--min-width: 300px;
--space-between: 2rem;
}
.container {
display: grid;
grid-gap: var(--space-between);
grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
}
.element {
display: grid;
place-items: center;
background: lightpink;
height: 100px
}