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

von4xj4u 于 2023-08-09 发布在其他

关注(0)|答案(3)|浏览(80)

我正在学习CSS grid，这些天我试图在我曾经使用Bootstrap grid的地方应用grid。一切都进行得很顺利，但我似乎无法弄清楚如何处理CSS网格中的边距。我知道grid-row-gap和grid-column-gap，但这只涵盖了简单的用例，而不是我所有的用例。举例来说：
1.如果我想在每第三行后使用40pxmargin，该怎么办？
1.请参见随附的设计图。我如何实现这个css grid？我已经将所有margins标记为m。我是使用显式的margin，还是将列/行留空以充当margin。
x1c 0d1x的数据

css

来源：https://stackoverflow.com/questions/51668765/how-to-deal-with-margins-in-css-grids

3条答案

按热度按时间

lp0sw83n1#

第一个问题“如果我想在每第三行后获得40 px的边距，该怎么办？”“
假设您正在使用12网格布局，您可以通过将40 px边距作为布局的一部分来创建grid-template-columns。如果你愿意，你也可以在所有网格之间给予一些间距作为檐沟。

display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px 1fr 1fr 1fr 40px 1fr 1fr 1fr 1fr;
  gap: 20px;

字符串

赞(0）回复(0）举报 2023-08-09

qpgpyjmq2#

你想要这样的东西吗：
.row：nth-child（3n+3）{ margin-bottom：40px;}
这将在每第三行后添加边距。

赞(0）回复(0）举报 2023-08-09

i7uq4tfw3#

创建一个类（例如.margin-40：{margin：40 px 0}），并将这个类放在行类旁边，无论您想放置40 px margin。

赞(0）回复(0）举报 2023-08-09

我来回答

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

3条答案

相关问题

热门标签

最新问答