当我最小化页面时，网格内的网格会移动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当我最小化页面时，网格内的网格会移动相关的知识，希望对你有一定的参考价值。
我希望有人可以帮助我，这是我的第一篇文章，我在搜索互联网论坛和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>答案
这不是完美的，但应该给你一个起点。
*
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>以上是关于当我最小化页面时，网格内的网格会移动的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
2022-02-03：有一队人（两人或以上）想要在一个地方碰面，他们希望能够最小化他们的总行走距离。 给你一个 2D 网格，其中各个格子内的值要么是 0，要么是