一侧水平无响应的网格

时间:2019-03-04 12:27:14

标签: css

我已经尝试寻找导致这种情况发生的原因的答案,但是到目前为止,获得成功的答案并没有运气。当减小窗口的大小时,第二个嵌套网格的左侧移到导航栏上。我敢肯定这很简单,但是没有发现它的经验。

嵌套的网格应该在左右两侧折叠,直到碰到@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;

  }
}

https://codepen.io/BenJohannson/pen/XGXQzB

0 个答案:

没有答案