CSS网格项目溢出滚动在小屏幕

cu6pst1q 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(136)

我有一个CSS网格模板为我的后块。我想要的是，在小屏幕所有4项，除了第一个应该在x滚动.我的意思是溢出-x滚动。我看到了一个模板，但不明白他们是怎么做到的。
看看他们的例子，我在哪里看到：大屏幕x1c 0d1x

小屏：

谁来帮我做一下。我该怎么做？
我的代码：

镜像

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 15px;
}
.div {
background: red;
padding: 15px;}
.div:nth-child(1) { grid-area: 1 / 1 / 2 / 5; }
.div:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.div:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
.div:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
.div:nth-child(5) { grid-area: 2 / 4 / 3 / 5; }

<div class="parent">
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
</div>

css

来源：https://stackoverflow.com/questions/76500926/css-grid-item-overflow-scroll-in-small-screen

2条答案

按热度按时间

wa7juj8i1#

我只是放了一个div，覆盖了可以滚动的元素，并添加了一些CSS，如果你对我的答案有疑问，你可以打电话给我：

* {
  margin: 0;
  padding: 0;
}
body {
  margin: 10px;
}
.scrolling,
.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-auto-flow: dense;
  gap: 2px;
}
.div {
  min-height: 150px;
  background-color: red;
}
@media screen and (min-width: 729px) {
  .parent > .div {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}
@media screen and (max-width: 728px) {
  .parent {
    grid-template-rows: repeat(3, 150px);
  }
  .scrolling {
    grid-template-columns: repeat(4, 50%);
    grid-template-rows: 150px;
    grid-column: 1 / 3;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  .scrolling > .div {
    scroll-snap-align: start;
  }
  .parent > .div {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

<div class="parent">
  <div class="div"></div>
  <div class="scrolling">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
  </div>
</div>

展开查看全部

赞(0）回复(0）举报 2023-06-25

db2dz4w82#

你也许可以用子网格来实现。在这里你可以玩img的最大大小来推或不子网格上溢出.
我在申报单上留下了“肖像”这个词。对于“桌面”，它是在景观

#parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  width: auto;
}
#postLevel1 img {
  max-width: 100%;
}
#postLevel2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  overflow-x: scroll;
}
#postLevel2 img {
  max-height: 100%;
}
@media (orientation: portrait) {}
@media (orientation: landscape) {
  #parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    width: 100vw;
    height: 100%;
  }
  #postLevel2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    overflow-x: hidden;
  }
  #parent img {
    max-width: 100%;
  }
}

<div id="parent">
  <div id="postLevel1">
    <img src="https://picsum.photos/id/237/1200" alt="">
  </div>
  <div id="postLevel2">
    <div>
      <img src="https://picsum.photos/id/35/600" alt="">
    </div>
    <div>
      <img src="https://picsum.photos/id/74/600" alt="">
    </div>
    <div>
      <img src="https://picsum.photos/id/192/600" alt="">
    </div>
    <div>
      <img src="https://picsum.photos/id/121/600" alt="">
    </div>
  </div>
</div>

展开查看全部

赞(0）回复(0）举报 2023-06-25

我来回答

CSS网格项目溢出滚动在小屏幕

2条答案

相关问题

热门标签

最新问答