Css Grid. Как сделать количество колонок и рядов в зависимости от контента

Question

Я сделал пример того что у меня сейчас вышло. https://codesandbox.io/s/icy-rgb-xpfx4 А то что примерно должно выйти - на картинке внизу.

Есть контейнер .grid, в него нужно расположить LI. Список продуктов (LI) приходит с сервера, и не известно сколько их будет. В моем примере их 16. Нужно сделать так, чтобы продукты сортировались колонками сверху вниз, слева направо, до тех пор пока могут влезть по высоте (как на картинке), а те что не могут, переносятся на следующие колонки.

Но суть в том что количество колонок я зарание знать не могу, так как не знаю сколько продуктов придет с сервера и задавать параметр grid-template-columns нет смысла, а без него все ломаеться. Как же мне тогда сделать автоматическое количество рядов и колонок чтобы оно само розмещалось пока влезает по высоте и ширине, как на картинке?

Да кстати, забыл добавить, по поводу ширины контейнера .grid. Ширина должна ростягиваться. Если колонки три, значит ширина примерно как на картинке, если продуктов будет больше, и добавиться еще одна колонка, то .grid растянеться по ширине вправо

Answer 1

Вместо количества колонок используйте значение auto-fit

С вашим примером получится как-то так:

html,
body {
  background-color: gray;
}

.grid {
  background-color: darkmagenta;
  color: white;
  height: 250px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(30px, 1fr));
  grid-auto-flow: column;
  grid-gap: 5px 50px;
  align-items: start;
}

.grid > li {
  border: 1px solid black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div class="grid">
      <li>Product 1</li>
      <li>Product 2</li>
      <li>Product 3</li>
      <li>Product 4</li>
      <li>Product 5</li>
      <li>Product 6</li>
      <li>Product 7</li>
      <li>Product 8</li>
      <li>Product 9</li>
      <li>Product 10</li>
      <li>Product 11</li>
      <li>Product 12</li>
      <li>Product 13</li>
      <li>Product 14</li>
      <li>Product 15</li>
      <li>Product 16</li>
    </div>
  </body>
</html>

БЛОГ НА HUSL

Css Grid. Как сделать количество колонок и рядов в зависимости от контента

Ответы (1 шт):