填充到 CSS 网格

Question

我是 HTML 和 CSS 的初学者，所以我一直在试验不同的系统，如 Flex 和 CSS Grid。我遇到了无法向网格列内的元素添加填充的问题。有没有什么办法解决这一问题？当我尝试向物理标题本身添加填充时，它不起作用，因为它是显示网格，这是代码：

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

您可以根据需要使用网格填充或行间隙在网格容器之间添加填充。

差距

行距

柱间隙

否则我需要更详细的问题来解决您的问题。

Answer 2

根据您的帖子很难理解您想要完成的任务，但看起来填充没有发生，因为您的 CSS 规则没有正确定位该元素。将填充移动到标头规则中（如下所示）确实会应用填充。

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>