![[css]-responsive-cards](https://prodsens.live/wp-content/uploads/2022/08/2525-css-responsive-cards-550x275.gif)
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 :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
}
