我正在用卡片創(chuàng)建一個網(wǎng)格布局，其中不是所有的卡片都有相同的高度。現(xiàn)在我希望卡片之間的間隙是相同的，即使卡片的高度不同。這有點(diǎn)像馬賽克布局。

我正在使用樣式組件。這是我目前為止有的，但是好像不行。

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

我怎樣才能使兩行之間的間隙相同，即使沒有一致的卡片高度？

我建議你玩列計(jì)數(shù)屬性。我以前沒有使用過它，所以不確定這是否會滿足你的要求，因?yàn)轫?xiàng)目沒有保證的順序，但你可能會找到一些解決方法，我想如果你需要保持秩序，或者其他人會詳細(xì)說明這一點(diǎn)。

.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>