Image list like in material/ui for web3uikit

I have a list of NFTs that are being pulled in like this:, index) => (
                    <div className="p-6 w-6/12">
                        <Card title={`${ethers.utils.formatEther(nft.attributes.price)} ETH`}>
                                <Illustration height="180px" logo="lazyNft" width="100%" />

And they look like so:

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

someone said on discord that:

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

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

That is perfect! Thank you!

Looking forward to the image list too!