Кладка рядами на Vue 3 ⇐ CSS

[Anonymous]

введите здесь описание изображения
Как мне создавать такие блоки? Конечно, мне следует использовать директиву v-for для рендеринга элементов. Но я понятия не имею, как это сделать. И никакие библиотеки каменной кладки не могут мне в этом помочь.
Я использовал "@yeger/vue-masonry-wall", но это не помогает, потому что он давал кладку по столбцам, но мне нужна кладка по строкам, например на изображении.
Мой код выглядит так:






{{ item.title }}
{{ item.description }}







const items = [
{ img: 'link-to-image1.jpg', title: 'Ночник LEGO', description: 'Красивый ночник в форме LEGO' },
{ img: 'link-to-image2.jpg', title: 'Ночник LEGO', description: 'Идеален для детской комнаты' },
{ img: 'link-to-image3.jpg', title: 'Ночник LEGO', description: 'Яркий и стильный' },
{ img: 'link-to-image4.jpg', title: 'Ночник LEGO', description: 'Долговечный дизайн' },
{ img: 'link-to-image5.jpg', title: 'Ночник LEGO', description: 'Энергосберегающий' },
{ img: 'link-to-image6.jpg', title: 'Ночник LEGO', description: 'Идеальный подарок' },
];



Подробнее здесь: https://stackoverflow.com/questions/792 ... s-on-vue-3