Taiwlwindcss：在单列中映射具有网格 returns 数据的数据元素

Question

我正在使用 tailwindcss 在我的 React 应用程序中使用网格显示数组数据。我想连续显示三个数据项如下。

但是我得到了如下列中的所有数据项。

这是我使用的代码（最少的代码）。

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

我该如何解决才能让三张卡片排成一行？我使用 tailwindcss 进行样式设置。 谢谢

Answer 1

您目前正在为每个供应商创建一个包含单个项目的新网格。

尝试设置一次网格（最后一行），然后将各个项目放入其中。

Taiwlwindcss：在单列中映射具有网格 returns 数据的数据元素

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

css

reactjs

tailwind-css