5

I've been experimenting with grids in css and come across the following.
I have created a container containing several divs

My .container creates a grid of 5 items having a width of 20%.

I added the grid-column-gap and noticed that it created a overflow in the container. I found that the grid-column-gap adds it's value to the grid-template-columns value. So I changed the value it 19%.

Now the items fit the grid. However my understanding is that grid-column-gap is added between the divs. What I'm having right now is that the last item also contains a gap at the right side.

I want to have the gaps between the divs and not at the end. Please, see the Fiddle

Can anyone explain what I'm doing wrong?

Interactive
  • 1,474
  • 5
  • 25
  • 57
  • 1
    `5 * 19%` (your columns) + `4 * 1%` (your column gaps) = 99%. The remaining space (1%) is what you're seeing on the right side. It's not `grid-column-gap` space. It's just remaining space. – Michael Benjamin Nov 16 '17 at 10:44

1 Answers1

6

Percentage units on grid are calculated as any other. If your unit is percentage it will add extra space to whole calculated area.

If however you add fr unit it will work similarly like flexbox and it will not add extra space.

Kushtrim
  • 1,899
  • 6
  • 14