英文:
How to make grid items leave no white space in between?
问题
在上述图片中，第二个网格项和第五个网格项之间存在幽灵空间，我想知道是否有使用tailwindcss解决此问题的方法。
我的代码：
<div className='grid grid-cols-3 grid-rows-3 grid-flow-dense gap-4 mt-10'>
{skills.map((skill, idx) => {
return (
<div
key={idx}
className='flex flex-col col-span-1 h-fit items-center justify-center gap-3 bg-white px-6 py-4 rounded-xl'>
<h4 className='font-bold text-xl'>{skill.title}</h4>
<div className='flex flex-wrap gap-2'>
{skill.tags.map((tag, idx) => (
<p
key={idx}
className='flex-grow text-[16px] border-[1px] px-2 py-2 border-spacing-2 border-black mr-2'>
{tag}
</p>
))}
</div>
</div>
);
})}
</div>
我尝试在代码中使用grid-flow-dense，以为它可能会起作用，但不幸的是没有起作用。
英文:
In the aboveimage there's ghost space between second grid-item and fifth grid-item I was wondering are there any solutions for this using tailwindcss
my code :
<div className='grid grid-cols-3 grid-rows-3 grid-flow-dense gap-4 mt-10'>
{skills.map((skill, idx) => {
return (
<div
key={idx}
className='flex flex-col col-span-1 h-fit items-center justify-center gap-3 bg-white px-6 py-4 rounded-xl'>
<h4 className='font-bold text-xl'>{skill.title}</h4>
<div className='flex flex-wrap gap-2'>
{skill.tags.map((tag, idx) => (
<p
key={idx}
className='flex-grow text-[16px] border-[1px] px-2 py-2 border-spacing-2 border-black mr-2'>
{tag}
</p>
))}
</div>
</div>
);
})}
</div>
I tried using grid-flow-dense in code thought it might work but sadly didn't .
答案1
得分: 0
你的网格正在按预期工作。grid-flow-dense 只是意味着当你使用跨越多个列的项目时，它会尝试将项目适应到空白空间中。请查看下面的演示。
"Remote h-fit"（以期望的方式填充空间）和 "justify-center"（不使内容水平居中对齐）。
英文:
Your grid is working as it should. grid-flow-dense just means it will try and fit in grid items in open spaces when you use items that span multiple columns etc. See it working below.
Remote h-fit (to fill the space as expected) and justify-center (to not have the content horizontally aligned in the middle.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论