@SenseyJW

Как сделать «бесконечную» сетку карточек на сайте?

Всех приветствую, я только недавно встал на путь верстки, поэтому при создании одного продукта возникла следующая проблема: необходимо создать сетку карточек товаров. Эти товары создаются пользователями, поэтому на главной странице необходимо создать бесконечную сетку, чтобы при прокрутке вниз карточки постоянно пополнялись до тех пор, пока данные из БД не закончатся.
Код самой карточки (без классов) выглядит примерно вот так:
<ul>
     <?php foreach ($title as $tit): ?>
          <li class="card__item">
              <?= $tit['name']; ?>
          </li>
           <?php endforeach; ?>
           <li>
                <p>Другие элементы (фото, категория и т.д., которые берутся из БД)</p>
          </li>
</ul>

Проблема в том, что непонятно, как сделать неограниченное количество рядов на том же grid.
Буду благодарен, если поделитесь любым источником на эту тему или посоветуете использовать какую-то другую сетку, или вообще стоит отказаться от сетки и добавить другую конструкцию.
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
yuchiko
@yuchiko
День добрый, думаю, что здесь стоит разбить на два вопроса:

1. Вопрос как построить гриду, которая при добавлении элементов не полетит:

ul {
  display: flex;
  flex-wrap: wrap;
}
ul > li {
  flex: 0 0 33.3%; 
  max-width: 33.3%;
}


Конечно ширину элементов внутри ul можно задать уже какую надо :)

2. Проблема с неограниченной подгрузкой
Это называется Infinity scroll
Так же сделано и у Pinterest - Massonry Grid + Infinity Scroll.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы