CODEWITHSUNDEEP
htmlcssgrid-layoutcss-grid
Jordy337
Jordy337

Reputation: 420

Padding to CSS Grid

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;

}

Upvotes: 10

Views: 66118

Answers (2)

Advena
Advena

Reputation: 2233

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.

Upvotes: 7

Adam Chubbuck
Adam Chubbuck

Reputation: 1670

It's difficult to understand what you want to accomplish based on your post, but it looks like the padding does not take place because your CSS rule is not properly targeting the element. Moving the padding into the header rule, as seen below, does apply the padding.

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


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

}
<header>
test
</header>

Upvotes: 3

Related Questions