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

Question

[SenseyJW]

Всех приветствую, я только недавно встал на путь верстки, поэтому при создании одного продукта возникла следующая проблема: необходимо создать сетку карточек товаров. Эти товары создаются пользователями, поэтому на главной странице необходимо создать бесконечную сетку, чтобы при прокрутке вниз карточки постоянно пополнялись до тех пор, пока данные из БД не закончатся.
Код самой карточки (без классов) выглядит примерно вот так:

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

Проблема в том, что непонятно, как сделать неограниченное количество рядов на том же grid.
Буду благодарен, если поделитесь любым источником на эту тему или посоветуете использовать какую-то другую сетку, или вообще стоит отказаться от сетки и добавить другую конструкцию.

Answer 1

[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.

Comments

[SenseyJW]

Спасибо!

[yuchiko]

Не за что, удачи в разработке :)