Question 189129 in Html Question posted in
Some basic documentation can be found here.

Html – CSS grid item overflow scroll in small screen

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
enter image description here

In Small Screen:

enter image description here

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

Heres my code:

Image
enter image description here

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

2

Answers


  1. 0

    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:

    * {
  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>
    Login or Signup to reply.
  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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search