Эта статья является частью серии, в которой я создаю клон 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, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.