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

huangapple go评论65阅读模式
英文:

CSS grid item overflow scroll in small screen

问题

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

看看他们的示例,在大屏幕上
CSS网格项目在小屏幕上溢出滚动

在小屏幕上:

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

有人可以帮助我吗?我该如何实现它?

这是我的代码:

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

.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>
英文:

I have a CSS grid template for my post-blocks. What I want that, in small screen all 4 items, except 1st one should scroll in x. I mean overflow-x scroll. I saw in a template, but not understand how they did it.

See Their Example, Where I Saw : In Big Screen
CSS网格项目在小屏幕上溢出滚动

In Small Screen:

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

Somebody help me to do it. How can I make it ?

Heres my code:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
&lt;div class=&quot;div&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;div&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;div&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;div&quot;&gt; &lt;/div&gt;
&lt;div class=&quot;div&quot;&gt; &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 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>
英文:

I just put a div covering the elements that could be scrolled and added some css, if you have questions about my answer you can call me:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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 &gt; .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 &gt; .div {
    scroll-snap-align: start;
  }
  .parent &gt; .div {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
  &lt;div class=&quot;div&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;scrolling&quot;&gt;
    &lt;div class=&quot;div&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;div&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;div&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;div&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是您要翻译的内容:

You can perhaps achieve with a subgrid.
here you can play with img max size to push or not the subgrid on overflow.

I left what it's supposed to be "portrait" in general declaration. For "desktop", it's in landscape

#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>
英文:

You can perhaps achieve with a subgrid.
here you can play with img max size to push or not the subgrid on overflow.

I left what it's supposed to be "portrait" in general declaration. For "desktop", it's in landscape

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#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%;
  }
}

<!-- language: lang-html -->

&lt;div id=&quot;parent&quot;&gt;
  &lt;div id=&quot;postLevel1&quot;&gt;
    &lt;img src=&quot;https://picsum.photos/id/237/1200&quot; alt=&quot;&quot;&gt;
  &lt;/div&gt;
  &lt;div id=&quot;postLevel2&quot;&gt;
    &lt;div&gt;
      &lt;img src=&quot;https://picsum.photos/id/35/600&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src=&quot;https://picsum.photos/id/74/600&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src=&quot;https://picsum.photos/id/192/600&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src=&quot;https://picsum.photos/id/121/600&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月18日 22:00:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76500926.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定