Taiwlwindcss: map through data elements with grid returns data in a single column

I am using tailwindcss to display array data using grid in my react app. I wanted to display three data items in a row as follows.

But I got all data items in a column wise as follows.

Here is the code I used(minimal code).

import React, { useEffect, useState } from 'react'
import { client } from 'apollo-client'
import { gql } from '@apollo/client'

export default function VendorsInfo() {
    const [data, setData] = useState([])
    function getDashboard(searchQuery) {
        client
            .query({
                query: gql`
                    {
                        allVendors {
                            id
                            isSupplier
                            storeName
                            phone
                            email
                            tinNumber
                            tradeName
                            productCont
                            storeCover
                            user {
                                id
                                username
                                phone
                                firstName
                                lastName
                                email
                                profilePic
                                isActive
                                isVerified
                                dateJoined
                            }
                        }
                    }
                `,
            })
            .then((res) => {
                console.log('ordersssssss', res.data)
                setData(res.data)
                // setisLoading(false)
                // setVendors(res.data.allVendors)
                // setfilteredVendors(res.data.allVendors)
                // setPages(res.data.allOrders.pages)
            })
            .catch()
    }
    useEffect(() => {
        getDashboard()
    }, [])
    console.log(data, 'this is list of vendors')
    const DisplayData = data?.allVendors?.map((row) => {
        return (
            <>
              
                <div  key={row.id} class="p-10 grid  sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
                    <div class="rounded overflow-hidden shadow-lg">
                        <img class="w-full" src={row.storeCover} alt="River" />
                        <div class="px-6 py-4">
                            <div class="font-bold text-xl mb-2">
                                {row.storeName}
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    })
    return <div>{DisplayData}</div>
}

How can I fix so that I will have three cards in a single row? I use tailwindcss for styling. Thanks

>Solution :

You’re currently creating a new grid with a single item for each vendor.

Try setting up the grid once (last line) and then place the individual items inside.

Relevant Code:

const DisplayData = data?.allVendors?.map((row) => {
  return (
    <>
      <div key={row.id} class="rounded overflow-hidden shadow-lg">
        <img class="w-full" src={row.storeCover} alt="River" />
        <div class="px-6 py-4">
          <div class="font-bold text-xl mb-2">{row.storeName}</div>
        </div>
      </div>
    </>
  );
});
return <div class="p-10 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">{DisplayData}</div>;