Name: [css] Responsive cards
Rating: 3.1 (1931 reviews)
Author: maurerkrisztian

[css] Responsive cards

Krisztián Maurer - Aug 7 '22 -

- Dev Community

It often happens that a set of cards needs to be made responsive, here is a simple solution:

https://codepen.io/maurerkrisztian/pen/dymeBmr

<div class="container">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
</div>

: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
}