How to deal with margins in CSS grids?

Question

I am learning CSS grid and these days I am trying to apply grid in places where I used to use Bootstrap grid. Everything is going well but I can't seem to figure out how to deal with margins in CSS grids. I am aware of grid-row-gap and grid-column-gap but that only covers the simple use cases and not all my use cases. For example:

What if I want 40px margin after every 3rd row?
See the picture of design attached. How do I achieve this css grid? I have marked all margins as m. Do I use explicit margin or do I leave columns/rows blank to act as margin.

the picture is the design I made. I was confused about writing html/css code so I asked this question. — dasfdsa, Aug 03 '18 at 08:55
you have grid-gap, margin, padding, etc ... you simply need to try — Temani Afif, Aug 03 '18 at 08:58
*"What if I want 40px margin after every 3rd row?"* - this is not possible with CSS-Grid. Rows are not elements and `grid-row-gap` applies to **every** row — Paulie_D, Aug 03 '18 at 09:47
Use empty rows instead of margins. https://stackoverflow.com/q/47461444/3597276 — Michael Benjamin, Aug 03 '18 at 15:14

score -1 · Answer 1 · answered Aug 03 '18 at 10:04

-1

Do you wanna something like this:

.row:nth-child(3n+3) { margin-bottom:40px; }

This will add margin after every 3rd row.

answered Aug 03 '18 at 10:04

Anil K.

251
1
7

score -3 · Answer 2 · answered Aug 03 '18 at 09:28

-3

Create a class (for example .margin-40:{margin:40px 0}) and put this class beside row class wherever you want to put 40px margin.

answered Aug 03 '18 at 09:28

Rohit

15
4

How to deal with margins in CSS grids?

2 Answers2