CSS 网格与负边距使元素高度随之增长

Question

我正在尝试将以下内容模拟到 CSS 网格中：

本质上是 7 张卡片布局，边距为负。

为了实现这一点，我创建了一个3x3网格并使用grid-area来让卡片 1 和 4 跨越 2 列。

然后，我在卡片 2 和 3 上应用了负边距以实现图像中的内容。

但是，正如您将在我的演示中看到的那样，它会导致卡片的高度随之增长。 例如，卡片 3 在卡片 2 结束的地方结束。

 :root { --black: #000000; --white: #FFFFFF; } body { background-color: var(--black); max-width: 940px; margin: 0 auto; padding: 600px 0; }.grid { display: grid; gap: 80px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); counter-reset: items; }.cell { background-color: var(--white); padding: 60px; display: flex; align-items: center; justify-content: center; }.cell:before { counter-increment: items; content: counter(items); font-size: 24px; font-weight: 700; }.cell:first-child { grid-area: span 2/span 1; }.cell:nth-child(2) { margin-top: -250px; }.cell:nth-child(3) { margin-top: -500px; }.cell:nth-child(4) { grid-area: span 2/span 1; }

 <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>

负边距是实现此类设计的最佳方式吗？

Answer 1

您可以将其视为 3 列 6 行网格，每个项目跨越两行。

这是一个简单的示例，每个项目都专门放置在相关的列和行中。

 :root { --black: #000000; --white: #FFFFFF; } body { background-color: var(--black); max-width: 940px; margin: 0 auto; }.grid { display: grid; grid-column-gap: 80px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); counter-reset: items; }.cell { background-color: var(--white); padding: 60px; display: flex; align-items: center; justify-content: center; grid-row: var(--r) / span 2; grid-column: var(--c); box-sizing: border-box; }.cell:before { counter-increment: items; content: counter(items); font-size: 24px; font-weight: 700; }.cell:nth-child(1) { --r: 3; --c: 1; }.cell:nth-child(2) { --r: 2; --c: 2; }.cell:nth-child(3) { --r: 1; --c: 3; }.cell:nth-child(4) { --r: 5; --c: 1; }.cell:nth-child(5) { --r: 4; --c: 2; }.cell:nth-child(6) { --r: 3; --c: 3; }.cell:nth-child(7) { --r: 5; --c: 3; }

 <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>