css - 当我最小化页面时，网格中的网格移动

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>