CSS Generator

Flexbox Gallery Layout
Customizing
Container
100
240
Item
0
40
0
40
Preview
Layout mode
Item
Item
Item
Item
Code
Paste to your file(s)
CSS
.gallery-wrapper {
  background-color: #dbdbdb;
  box-sizing: border-box;
  height: 195px;
  overflow: hidden;
}

.gallery-scroll {
  box-sizing: border-box;
  height: 195px;
  overflow-x: auto;
  overflow-y: hidden;
}

.gallery {
  background-color: #dbdbdb;
  display: flex;
  box-sizing: border-box;
  width: max-content;
  height: 180px;
  padding: 0px 8px;
}

.item {
  box-sizing: border-box;
  height: 100%;
  padding: 16px 8px;
}

.item img {
  display: block;
  height: 100%;
}
HTML
<div class="gallery-wrapper">
  <div class="gallery-scroll">
    <div class="gallery">
      <div class="item">
        <img src="https://images.unsplash.com/photo-1559128010-7c1ad6e1b6a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
      </div>
      <div class="item">
        <img src="https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
      </div>
      <div class="item">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
      </div>
      <div class="item">
        <img src="https://images.unsplash.com/photo-1476673160081-cf065607f449?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
      </div>
    </div>
  </div>
</div>