Display items in a grid layout

[Triskelion7]

I'm trying to use VirtualList in a Vue3 project in a grid format but haven't quite figured out how to achieve it. Is there a way to set up VirtualList to display items in a grid layout? Currently, they're appearing in a single column. Any tips or suggestions would be much appreciated!

Here is the code:

<template>
<section class="container mx-auto gap-[20px] md:gap-[24px] mt-6 px-4 sm:px-6 lg:px-10">
    <template v-if="filteredCards.length > 0">
      <VirtualList 
        v-if="filteredCards.length > 0 && isClient"
        ref="list"
        :items="filteredCards"
        :first-render="50"
        class="grid no-scrollbar"
        :item-key="getItemKey"
      >
        <template #default="{ item, index }">
          <div class="item">
            <HomeCard
              :key="item.id"
              :id="item.id"
              :ciudades="item.ciudades"
              :tags="item.tags"
              :cost="item.cost"
              :rating="item.rating"
              :numRates="item.numRates"
              :title="item.title"
              :description="item.description"
              :ubicaciones="item.ubicaciones"
              :transport="item.transport"
              :imagenes="item.imagenes.map(image => ({ url: image.imagen }))"
            />
          </div>
        </template>
      </VirtualList>
    </template>
</section>
</template>

<script setup lang="ts">
import VirtualList from '@virtual-list/vue';

const isClient = ref(false);

const getItemKey = (item) => item.id;

onMounted(() => {
  isClient.value = true;
});
</script>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.item {
  padding: 0.5rem;
  box-sizing: border-box;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
</style>

Thank you.

[phphe]

no. it already use flex, don't use grid again.