- bounty将在7天后过期**。回答此问题的人有资格获得+50的声望奖励。Daniel_Kamel希望吸引更多人关注此问题。
在我的react和tailwindcss项目中,我在其中一个组件中有以下代码片段:
<div className="container">
<div className="grid grid-cols-4 gap-x-2 gap-y-4">
{valueCards.map(
(item,index) => (
<div key={index}>
<ValuesCard description={item.description} isPrimary={index % 2 === 0} />
</div>
)
)}
</div>
</div>
这将产生以下结果:
我所寻找的是首先尝试让所有多余的div出现在行的中间,就像这样(注意,我不介意用普通的css代替tailwindcss):
我也希望所有的卡都有相同的高度等于其中最大的卡的高度,即使这张卡不在同一行。
2条答案
按热度按时间slwdgvem1#
看看我做了什么。这是HTML和纯CSS。调整宽度和高度的必要。基本的是把顶部和底部的网格在不同的DIV的,然后中心的两个DIV的。
vs91vp4v2#
看起来用CSS网格是不可能做到的。这是因为网格算法确保元素按照网格线的大小排列。
更简单的解决方案是使用CSS flex box和
justify-content: center
我尝试过执行相同的here in this code pen