Форум

SuperZen · #1 (**permalink**) 29.11.2019, 17:34

<!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);

рони · #2 (**permalink**) 29.11.2019, 17:50

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>

SuperZen · #3 (**permalink**) 29.11.2019, 17:51

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

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

SuperZen · #4 (**permalink**) 29.11.2019, 17:51

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

рони · #5 (**permalink**) 29.11.2019, 17:54

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

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

SuperZen · #6 (**permalink**) 29.11.2019, 20:20

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

destus · #7 (**permalink**) 01.12.2019, 07:32

<!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>

Форум

Справочник

Discord чат

Курсы javascript