html - 使用 CSS 网格和布局对齐

Question

我正在尝试在整个 css 网格后面放置一个背景，您可以在正文中看到番茄颜色，但我希望该背景颜色完全围绕主标记。我尝试了很多不同的方法来包装它，但我有一些东西是冲突的。

另一件事是我无法让 gird 也从导航栏下方开始，我希望导航栏在顶部拉伸(stretch)并且在页面首次加载时不重叠。我不确定是否正确的方法是只留出 margin 。我想还有其他方法可以做到这一点。

这是一个jsfiddle

body {
background: tomato;

/* font-family: Helvetica, Arial, sans-serif;
line-height: 1.5; */
font: normal 1em/1.5 Helvetica, Arial, sans-serif;
margin: 0px auto;
padding: 0px;
width:80%
}

html{
    background: linear-gradient(to right, palegreen,paleturquoise, plum);

}

/* main */
main{
    width: 85%;
    height: 80px;
    margin:.5em  auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
}

main > div:nth-child(odd){
    background: peachpuff;

}

main > div {
    background: palegreen;
    padding: 1em;
    border-radius: 20px;

}

显示发生了什么，所以如果有人知道如何修复它，请告诉我。

Answer 1

删除 main 中的 height 将解决背景颜色问题。

main{
    width: 85%;
    margin:.5em  auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
}

将 left:0 添加到顶部导航栏。

nav{
    width: 100%;
    overflow: auto;
    background: rgba(255, 255, 255, 0.507);
    display:grid; 
    grid-template-columns: repeat(3, 1fr);
    height: 50px;;
    position: fixed;
    top:0;
    left: 0px; /*add this to stretch */
}

将 margin-top 给 main 是个不错的主意。这是正常的做法。