如何处理CSS网格中的边距？

Question

我正在学习CSS grid，如今，我试图在曾经使用Bootstrap grid的地方应用grid。一切进展顺利，但是我似乎无法弄清楚如何处理CSS网格中的边距。我知道grid-row-gap和grid-column-gap，但这仅涉及简单的用例，而没有涉及我的所有用例。例如：

1. 如果我每隔第三行要40px margin怎么办？
2. 请参阅所附图片。如何实现此CSS grid？我已将所有margins标记为 m 。我应该使用显式margin还是将列/行留空以充当margin。

Answer 1

您想这样吗？

.row：nth-​​child（3n + 3）{margin-bottom：40px; }

这将在每第3行之后增加边距。

Answer 2

创建一个类（例如.margin-40：{margin：40px 0}），并将该类放在要放置40px边距的行类旁边。