Эта статья является частью серии, в которой я создаю клон Spotify Web Player.

В своей последней статье я рассказал о решении, которое реализовал для масштабируемой боковой панели оригинального приложения. На этот раз мы сосредоточимся на этом интересном адаптивном поведении макета:

Как видите, количество карточек в этих двух контейнерах автоматически подстраивается под их новую ширину. Мы можем добиться этого в стандартном CSS без медиа-запросов, используя возможности сеток CSS✨.

Структура HTML и базовые стили

Мы настраиваем простой контейнер с кучей дочерних элементов div и некоторыми базовыми стилями, чтобы все выглядело немного лучше.

<div class="grid">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
  <div class="card">9</div>
  <div class="card">10</div>
  <div class="card">11</div>
  <div class="card">12</div>
  <div class="card">13</div>
  <div class="card">14</div>
  <div class="card">15</div>
</div>
html {
  color-scheme: dark;
}

.card {
  display: grid;
  place-items: center;
  height: 1rem;
  background: #141414;
}

Получаем что-то вроде этого:

Настройка сетки

Мы собираемся добавить стили для нашего контейнера сетки, чтобы он работал должным образом.

Сначала добавьте в контейнер свойство display grid, задайте свойства gap, grid-template-columns и grid-template-rows следующим образом:

.grid {
  display: grid;
  gap: 0 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-template-rows: auto;
}

Ключами здесь являются повторение, автозаполнение и minmax. Мы указываем контейнеру всегда создавать столько столбцов, сколько необходимо, и размер их, чтобы заполнить всю ширину (автозаполнение), с ограничением, что один столбец должен быть не менее 10rems (~ 160 пикселей) в ширину и не более 1fr(FRaction) в ширину, что делает все наши столбцы одинакового размера.

Несмотря на то, что мы явно объявили только одну строку, когда в одной строке недостаточно места для соблюдения этих ограничений, сетка выталкивает дополнительные элементы в новую строку. В нашем случае мы хотим, чтобы этот дополнительный контент полностью исчез. Мы можем легко сделать это, установив для свойства grid-auto-rows значение 0 и скрыв переполнение контейнера:

.grid {
  display: grid;
  gap: 0 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  overflow: hidden;
}

Свойство grid-auto-rows определяет высоту автоматически сгенерированных строк в нашей сетке. Установив его на 0, мы предотвратим рост сетки по вертикали. Затем нам просто нужно скрыть переполняющий контент, чтобы получить следующее:

Мы здесь! Сетка теперь «меняет размер» автоматически🚀.

Вы можете найти полный код здесь.

Как я сказал в начале, это одна из многих интересных проблем, с которыми я столкнулся при создании Клона Spotify Web Player с React и TailwindCSS.

Когда я пишу эту статью, проект все еще находится в разработке. Ознакомиться с текущим состоянием разработки можно здесь. Вы также можете проверить код здесь.

Спасибо за чтение и увидимся в следующий раз!

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.