我在我的Next.js应用程序中使用Tailwindcss，在网格上显示来自Supabase数据库的大量图像。然而，我遇到了一个问题，当我检查页面时，网格似乎在那里，但图像显示在行中，而不是列中。以下是我的意思的屏幕截图。
其设置方法是使用一个保存图像的组件，该组件填充一个图库，该图库嵌套在我的index.js中。
图像
<a href={img.id} className='group'>
<div className='aspect-w-3 aspect-h-4 w-full overflow-hidden rounded-md bg-gray-200'>
<Image
alt={img.title}
src={img.imageSrc}
width="200"
height="300"
layout="fill"
objectFit='cover'
className={cn('group-hover:opacity-75 duration-700 ease-in-out',
isLoading? 'grayscale blur-2xl scale-110':'grayscale-0 blur-0 scale-100'
)}
onLoadingComplete={() => setLoading(false)}
/>
</div>画廊
<div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl">
<div className="grid grid-cols-1 grid-flow-row-dense gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<div>
<BlurImage key={img.id} img={img} />
</div>
</div>
</div>索引
<div className="mx-auto">
{product.map((img) => (
<Gallery key={img.id} img={img} />
))}
</div>型
我希望显示网格上的所有图像，并排放置，并 Package 到下一行，这对我的理解应该是CSS网格的默认行为。
更新：在进一步检查网站后，我想更新这个问题。正如你在截图中看到的，保存网格容器的div已经被乘了5倍（这与数据库中的条目数量相关）。
你知道我做错了什么吗？先谢了。
1条答案
按热度按时间gxwragnw1#
更新
在没有测试站点的情况下不太确定，但是看起来网格容器
div确实是倍增的，因为Gallery正在被Map。有没有可能只需要一个图库？在这种情况下，也许可以考虑不使用
map()图库，而是将product数据作为 prop 传递给gallery和map()图像。可能是这样的：
原件
我在这个最小化的test中尝试了发布的
grid容器样式，它似乎没有错误。发布的代码“GALLERY”有没有可能缺少一个
map()？因为似乎应该给每个Gallery一组images，以便使用BlurImage填充到grid容器中。如果是这种情况，也许可以尝试删除额外的
BlurImagePackagediv，以便填充组件由grid容器放置。画廊
型