css 如何制作一个行差距一致的网格布局?[副本]

x33g5p2x  于 2023-06-07  发布在  其他
关注(0)|答案(1)|浏览(114)

此问题已在此处有答案

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;
`;

我怎么才能让它的行之间差距是相同的,即使没有一致的卡高度?

iq3niunx

iq3niunx1#

我建议你玩column-count属性。我以前没有用过,所以不确定这是否能满足你的要求,因为物品没有保证的顺序,但你可能会找到一些变通办法,我想如果你需要保持秩序,或者也许别人会详细说明这一点。

.wrapper {
  column-count: 4;
  max-width: max-content;
  border: 1px solid red;
  padding: 8px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid blue;
  break-inside: avoid;
  width: 100px;
}

.first {
  height: 50px;
}

.second {
  height: 65px;
}

.third {
  height: 80px;
}

.fourth {
  height: 25px;
}

.fifth {
  height: 45px;
}

.sixth {
  height: 55px;
}

.seventh {
  height: 60px;
}

.eighth {
  height: 150px;
}
<div class="wrapper">
  <div class="item first">
    1
  </div>
  <div class="item second">
    2
  </div>
  <div class="item third">
    3
  </div>
  <div class="item fourth">
    4
  </div>
  <div class="item fifth">
    5
  </div>
  <div class="item sixth">
    6
  </div>
  <div class="item seventh">
    7
  </div>
  <div class="item eighth">
    8
  </div>
</div>

相关问题