当我最小化页面时，网格内的网格会移动

Question

我希望有人可以帮助我，这是我的第一篇文章，我在搜索互联网论坛和W3等时无法找到答案。

我正在学习HTML和CSS，并尝试从头开始重新创建随机网页以学习技巧。

在这种情况下，我的网页有两个最后部分，第一部分包含一个网格，第二部分是页脚。

在当前代码格式中，当我最小化页面时，这两个容器都会向上移动到文本主体上，但在页面最大化时看起来很好。

我的问题是，导致这种转变的原因是什么，以及如何解决这个问题以保持正确的位置。我试图重新创建的页面是：https://www.theadventurejunkies.com/best-skiing-snowboarding-blogs/

* {
     box-sizing: border-box;
}
 body {
     margin: 0px;
     padding: 0px;
}
 .grid {
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 143px 40px 375px 79px 2300px 362px 76px;
}
 .link-footer {
     border-top: 20px solid rgb(51,51,51);
     background-color: rgb(39,39,39);
     grid-template: 100% / 10% 40% 20% 20% 10%;
     display: grid;
}
 .box-a {
     border: 1px solid white;
     height: 340px;
     color: white;
}
 .box-b {
     border: 1px solid white;
     color: white;
}
 .box-c {
     border: 1px solid white;
     color: white;
}
 .box-d {
     border: 1px solid white;
     color: white;
}
 .box-e {
     border: 1px solid white;
     color: white;
}
 .footer-image{
     width: 80%;
     height: auto;
}
 .footer {
     border: 1px black dotted;
     background-color: rgb(28,29,30);
}

<div class="link-footer">
    <div class="box-a">column</div>
    <div class="box-b">
        <img class="footer-image" src="https://adventurejunkies-theadventurejunk.netdna-ssl.com/wp-content/uploads/SnowSportsFooter.png">
    </div>
    <div class="box-c">column</div>
    <div class="box-d">column</div>
    <div class="box-e">column</div>
</div>
<div class="footer">footer</div>

Answer 1

这不是完美的，但应该给你一个起点。

* {
     box-sizing: border-box;
}
 
 .link-footer {
     border-top: 20px solid rgb(51,51,51);
     background-color: rgb(39,39,39);
     grid-template-columns: minmax(auto 1fr) repeat(4, 1fr) minmax(auto 1fr);
     grid-template-rows: auto auto;
     display: grid;
}
 .box-a {
     border: 1px solid rgb(51,51,51);
     grid-row: 1;
     grid-column: 1;
     color: white;
}
 .box-b {
     border: 1px solid rgb(51,51,51);
     color: white;
     grid-row: 1;
     grid-column: 2 / 4;
}
 .box-c {
     border: 1px solid rgb(51,51,51);
     color: white;
     grid-row: 1;
     grid-column: 4;
}
 .box-d {
     border: 1px solid rgb(51,51,51);
     color: white;
     grid-row: 1;
     grid-column: 5;
}
 .box-e {
     border: 1px solid rgb(51,51,51);
     color: white;
     grid-row: 1;
     grid-column: 6;
}
 .footer-image{
     width: 80%;
     height: auto;
}
 .footer {
     color: white;
     border: 1px black dotted;
     background-color: rgb(28,29,30);
     grid-row: 2;
     grid-column: 1 / 7;
}

<div class="link-footer">
    <div class="box-a">left gutter</div>
    <div class="box-b">
        <img class="footer-image" src="https://adventurejunkies-theadventurejunk.netdna-ssl.com/wp-content/uploads/SnowSportsFooter.png">
    </div>
    <div class="box-c">snow gear</div>
    <div class="box-d">resources</div>
    <div class="box-e">right gutter</div>
    <div class="footer">footer</div>
</div>