Javascript-форум - css grid динамическое кол-во колонок с нефиксированной шириной

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - css grid динамическое кол-во колонок с нефиксированной шириной (https://javascript.ru/forum/dom-window/78972-css-grid-dinamicheskoe-kol-vo-kolonok-s-nefiksirovannojj-shirinojj.html)

css grid динамическое кол-во колонок с нефиксированной шириной

<!DOCTYPE html>
<html>

<head>
  <style>
    .items {
      display: grid;
      /* 
      это не подходит, потому-что надо указывать точное число (3, например), 
      те если item'ов будет больше они сползают на следующую строку
    */
      /* grid-template-columns: repeat(3, max-content); */

      /* это тоже не подходит, потому-что надо, чтобы размер был диначический, а не 100px */
      grid-template-columns: repeat(auto-fit, 100px);
      grid-column-gap: 10px;
    }

    .item {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <button class="button" type="button">gen</button>
  <div class="items"></div>
</body>
<script>
  const gen = () => Array.from({
    length: parseInt(Math.random() * 4) + 3
  }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
  const itemsEl = document.querySelector('.items')
  const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
  document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>

подможите, пож-та, сделать динамическое кол-во колонок с нефиксированной шириной каждой колонки,

т.е. надо избавиться от фиксированной ширины

grid-template-columns: repeat(auto-fit, 100px);

SuperZen,
а если flex?

<!DOCTYPE html>
<html>

<head>
    <style>
        .items {
            display: flex;

        }

        .item {
            background-color: lightgray;
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <button class="button" type="button">gen</button>
    <div class="items"></div>
</body>
<script>
    const gen = () => Array.from({
        length: parseInt(Math.random() * 4) + 3
    }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
    const itemsEl = document.querySelector('.items')
    const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
    document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>

<style>
    .items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, max-content));
      grid-column-gap: 10px;
    }
</style>

вроде получилось... может все же есть другие варики, готов рассмотреть...

рони, через flex понятно, хочу именно grid'ом...

SuperZen, на всякий случай если пример с html не [js run] а

[html run]
... минимальный код страницы с вашей проблемой
[/html]

рони, то то думаю, что оно не запускается...

<!DOCTYPE html>
<html>

<head>
  <style>
    .items {
      display: grid;
      justify-content: start;
      grid-auto-flow: column;
      grid-column-gap: 10px;
    }

    .item {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <button class="button" type="button">gen</button>
  <div class="items"></div>
</body>
<script>
  const gen = () => Array.from({
    length: parseInt(Math.random() * 4) + 3
  }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
  const itemsEl = document.querySelector('.items')
  const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
  document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>