英文:
How can I make it so the map displays only 4 items and then it starts a second row
问题
我正在使用Tailwind从我的MongoDB集群中映射一些项目，并且我只想每行显示4个项目。
我真的不知道如何让它自己开始一行。现在它只是把它们挤在一行里。
<div className="flex justify-center gap-12 max-h-full max-w-full">
{products?.length > 0 &&
products.map((product) => (
<div className="w-96 p-4 border border-stone-800 items-center justify-center text-center rounded-md">
<div className="flex justify-center">
<img
src={product.images[0]}
alt={product.title}
className="mapped-img"
/>
</div>
<p>{product.title}</p>
</div>
))}
</div>
英文:
I'm mapping some items from my mongodb cluster using tailwind, and I want just 4 items in one row.
Can't really figure out how to make it so it starts a new row by itself. Now it just mushes them together in one row.
<div className="flex justify-center gap-12 max-h-full max-w-full ">
{products?.length > 0 &&
products.map((product) => (
<div className="w-96 p-4 border border-stone-800 items-center justify-center text-center rounded-md">
<div className="flex justify-center">
<img
src={product.images[0]}
alt={product.title}
className="mapped-img"
/>
</div>
<p>{product.title}</p>
</div>
))}
</div>
答案1
得分: 1
我认为你应该使用 grid 而不是 flex。
-
在父元素中，将
flex替换为grid grid-cols-1 md:grid-cols-4，并调整断点值。 -
删除子元素上的
w-96，宽度应基于屏幕宽度，硬编码的宽度会破坏布局。
创建了一个 tailwind playground 供参考。
英文:
I think you should use grid instead of flex.
-
In the parent element, replace
flexwithgrid grid-cols-1 md:grid-cols-4and play with the breakpoint values. -
Remove the
w-96on the child element, the width should be based on screen width, hardcoded width will break the layout.
Created a tailwind playground FYR.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论