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

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

css

来源：https://stackoverflow.com/questions/76376417/how-to-make-a-grid-layout-where-the-gap-in-between-rows-are-consistent

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-06-07

我来回答

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

1条答案

相关问题

热门标签

最新问答