[css] Отзывчивые карточки

Часто бывает, что набор карточек нужно сделать отзывчивым, вот простое решение:

<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
} 
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий