Grid width problem

why my grid is covering whole horizontal width

  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  column-gap: 0px;
  row-gap: 10px;
  justify-content: center;

It’s perhaps due to overflow from the grid container-- i can’t see what’s inside the grid items to get a better understanding of the problem… give the grid items a min-width of zero, so that it can constrain. That should work or use the fit-content function to create the column(s)–i ran into the same issue a couple of days ago and the min-width solved it for me

1 Like

Does it work for you?

after I added other elements the gird came back to the original size , I think it could be also be fixed with your answer but I didn’t tried it

Alright then… There’s so many ways :grinning:

can you tell the reason for some extra space below the grid

Maybe you have a fixed height for the grid container and the grid items, or with align items set to start on the grid container with a fixed height(the remaining vertical space of course)