填充到 CSS 网格

Question

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

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

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

gap

row-gap

column-gap

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

Answer 2

根据您的 post 很难理解您想完成什么，但看起来填充没有发生，因为您的 CSS 规则没有正确定位元素。将填充移动到 header 规则中，如下所示，确实应用了填充。

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>

填充到 CSS 网格

Padding to CSS Grid

html

css

grid-layout

css-grid