代码之家 › 专栏 › 技术社区 › Md. Ibrahim

CSS网格项溢出小屏幕滚动

grid css html

Md. Ibrahim · 技术社区 · 2 年前

我有一个CSS网格模板用于我的帖子块。我想要的是,在小屏幕上,除了第一个项目外,所有4个项目都应该在x中滚动。我的意思是溢出x滚动。我看到了一个模板,但不明白他们是怎么做到的。

参见他们的例子,我看到的地方: 在大屏幕中

在小屏幕中:

有人帮我做。我怎么做?

这是我的代码:

形象

.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>

0 回复 | 直到 2 年前

Yulian Santiago 2 年前

我只是放了一个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>

pier farrugia 2 年前

你也许可以通过一个子网格来实现。在这里,您可以使用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>