Image list like in material/ui for web3uikit

Moralis General
#1

I have a list of NFTs that are being pulled in like this:

listedNfts.map((nft, index) => (
                    <div className="p-6 w-6/12">
                        <Card title={`${ethers.utils.formatEther(nft.attributes.price)} ETH`}>
                            <div>
                                <Illustration height="180px" logo="lazyNft" width="100%" />
                            </div>
                        </Card>
                    </div>
                ))

And they look like so:

Screen Shot 2022-03-11 at 9.29.42 PM
Screen Shot 2022-03-11 at 9.29.42 PM1576×556 104 KB

However, they don’t go to the next row when more are added. Am I missing something? Is there something I should be doing different to make it so?

EDIT: I’m using tailwind to get the original formatting.

1 Like
#2

someone said on discord that:

Abhinav_MV
You can give flex wrap property to the container to make them go to next row
#3

Hi @PatrickAlphaC

Thank you for your question. I will add later the Grid component. For now, you can create a wrapper:

  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  width: 100%;

and just place cards to it

1 Like
#4

That is perfect! Thank you!

Looking forward to the image list too!