我已经尝试寻找导致这种情况发生的原因的答案,但是到目前为止,获得成功的答案并没有运气。当减小窗口的大小时,第二个嵌套网格的左侧移到导航栏上。我敢肯定这很简单,但是没有发现它的经验。
嵌套的网格应该在左右两侧折叠,直到碰到@media查询断点为止。
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 1000px) {
.box1 {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 14 ;
display: grid;
grid-template-columns: repeat(1, 1fr);
position: fixed;
}
}
@media (min-width: 1000px) {
.box2 {
grid-column-start: 2;
grid-column-end: 6;
grid-auto-rows: auto;
position: relative;
}
}