Is it possible to make css grid overflow on same row

Question

I am trying to make a div that contains 4 images display each image evenly so it shows 3 images with a gap of 20px. This div should be scrollable so the final image can be scrolled to, however I can't seem to make it overflow through css grid.

Closest I've got it is this, however there is no overflow-x containing the final image

To achieve this I wrote the following code for my grid. I'm aware grid-template-rows set to 100% is causing the issue, but I'm not sure of an alternate method:

    .container {
    width: 100%;
    height: 100%;
    }
    
    .images {
      height: 200px;
      width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    gap: 20px;
    overflow-x: scroll;
    }

    .images img {
      object-fit: cover;
      object-position: center;

      width: 100%;
      height: 100%;
    }

    <div class="container">
    <div class="images">
        <img
        src={image}
      />

        <img
        src={image}
      />

        <img
        src={image}
      />

        <img
        src={image}
      />
      </div>
      </div>

Alternatively, I have tried using flexbox with each image having 33.3% width, however getting this to work with a 20px gap seems too 'hacky'.

Thanks

score 1 · Answer 1 · answered Nov 26 '20 at 20:19

is this what you are trying to do? :

.images {
  box-sizing: border-box;
  margin: 3vw;
  display: flex;
  overflow: auto;
  gap: 2vw;
}

img {
  width: calc(33.33% - 1vw);/* minus half of the gap size */
  flex-shrink: 0;
}

<div class="container">
  <div class="images">
    <img src=https://picsum.photos/id/1010/400/300 />
    <img src=https://picsum.photos/id/1011/400/300 />
    <img src=https://picsum.photos/id/1012/400/300 />
    <img src=https://picsum.photos/id/1013/400/300 />
  </div>
</div>

Is it possible to make css grid overflow on same row

1 Answers1