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