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