[css] Responsive cards – DEV Community

August 7, 2022

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


<div class="container">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
Enter fullscreen modeExit fullscreen mode
: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
Enter fullscreen modeExit fullscreen mode


Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *