Grid width problem

1

why my grid is covering whole horizontal width

#drum-pad{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  column-gap: 0px;
  row-gap: 10px;
  justify-content: center;
}

Screenshot (293)
Screenshot (293)1366Ă—768 63.4 KB

2

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
3

Does it work for you?

4

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

Screenshot (294)
Screenshot (294)1366Ă—768 88.7 KB

5

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

6

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

7

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)