Masonry by rows on Vue 3

enter image description here

How I can create blocks like this? Of course I should use directive v-for to render items. But I have no idea how. And any masonry libs cant help me with that

I used "@yeger/vue-masonry-wall" but it doesnt help because it gave masonry by cols, but I need masonry by rows like in image.

My code looks like this:

<template>
  <masonry-wall 
    :items="items" 
    :column-width="200" 
    :gap="16" 
    :ssr="false"
    class="masonry-wall"
  >
    <template #default="{ item }">
      <div class="masonry-item">
        <img :src="item.img" :alt="item.title" class="masonry-img" />
        <div class="masonry-caption">
          <h1 class="masonry-title">{{ item.title }}</h1>
          <span class="masonry-description">{{ item.description }}</span>
        </div>
      </div>
    </template>
  </masonry-wall>
</template>

<script setup>
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: 'Идеальный подарок' },
];
</script>

There was already a similar question about Row Masonry Layout, answered here: Horizontal "masonry" type layout with variable row heights

One of the commenters (SB3NDER) have offered an example of such layout, css-only, on codepen. It seems a simple and nice example with explanations and comments offering the way to build the functionality you need. You may want to check it out.