Padding to CSS Grid

Question

I am a beginner to HTML and CSS, so I've been experimenting with the different systems like Flex and CSS Grid. I've run into an issue where I can't add padding to an element inside a Grid Column. Is there any way to fix this? When I try to add padding to the physical header itself it doesn't work because it's display grid, here's the code:

header{
    width:100%;
    height: 5%;
    color: #fff;
    background: #434343;
    display: grid;
    grid-template-columns: 2fr auto;
}


header:not(menu, h1, nav){
    display: block;
    padding:500px;

}

Answer 1

You can add padding between the grid containers using grid padding or row gap, depending on your needs.

gap

row-gap

column-gap

Otherwise I would need a more detailed question to solve your issue.