此问题已在此处有答案:
CSS-only masonry layout(5个答案)
6天前关闭
我正在创建一个网格布局与卡,其中不是所有的卡有相同的高度。现在我想在卡之间差距是相同的,事件时,卡的高度是不同的。这将是一个有点马赛克布局。
我正在使用样式化组件。这是我目前所拥有的,但似乎不起作用。
export const Wrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
grid-auto-rows: minmax(0, 1fr);
`;
export const Card = styled.div`
background: #ffffff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 4px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 15px;
justify-content: space-between;
height: fit-content;
`;
我怎么才能让它的行之间差距是相同的,即使没有一致的卡高度?
1条答案
按热度按时间iq3niunx1#
我建议你玩column-count属性。我以前没有用过,所以不确定这是否能满足你的要求,因为物品没有保证的顺序,但你可能会找到一些变通办法,我想如果你需要保持秩序,或者也许别人会详细说明这一点。