0

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:

  1. What if I want 40px margin after every 3rd row?
  2. 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.

enter image description here

dasfdsa
  • 7,102
  • 8
  • 51
  • 93

3 Answers3

0

possible answer for your first question "What if I want 40px margin after every 3rd row?"

Assuming you are working with a 12 grid layout, you can create your grid-template-columns by including the 40px margin spacing you want as part of the layout. if you want you can also give some gap as gutter between all grids.

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px 1fr 1fr 1fr 40px 1fr 1fr 1fr 1fr;
  gap: 20px;
Yabetse Dubale
  • 1
  • 2
-1

Do you wanna something like this:

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

This will add margin after every 3rd row.

Anil K.
  • 251
  • 1
  • 7
-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.

Rohit
  • 15
  • 4