英文:
CSS grid item overflow scroll in small screen
问题
我有一个用于我的帖子块的CSS网格模板。我想要的是,在小屏幕上,除了第一个之外的所有4个项目都应该在x轴上滚动。我的意思是overflow-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>
英文:
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
In Small Screen:
Somebody help me to do it. How can I make it ?
Heres my code:
<!-- 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 -->
<div class="parent">
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
<div class="div"> </div>
</div>
<!-- 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 > .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;
}
}
<!-- language: lang-html -->
<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>
<!-- 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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论