Columns

HTML

<div class="container">
  <div class="group">
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://i.pinimg.com/originals/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></div>
    <div class="wrapper"><img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
    <div class="wrapper"><img src="https://s.w.org/plugins/geopattern-icon/random-post-for-widget.svg"></div>
    <div class="wrapper"><img src="https://images.theconversation.com/files/135969/original/image-20160830-26282-1tt17ym.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip"></div>
    <div class="wrapper"><img src="https://www.dumpaday.com/wp-content/uploads/2018/06/random-pictures-10.jpg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRYkflEQWLH5gOAEChBRsN0R11n1by_3c24sJRAcGumVARrZ1-k&usqp=CAU"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSRKJI1Jhsk6iHIUEdgpL2z5USE6S0B54iBIEUU76r1PHYL1_GV&usqp=CAU"></div>
    <div class="wrapper"><img src="https://miro.medium.com/max/11796/1*IC7_pdLtDMqwoqLkTib4JQ.jpeg"></div>
    <div class="wrapper"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRN0TyKB-bciZuiyX5ZzJyKGhLSjAPh-ZrUkhr6WJXJzY0qkteE&usqp=CAU"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100px;
}

.wrapper {
  background-color: red;
}

.group {
  column-width: 100px;
  column-gap: 0px;
  text-align: center;
}

.container {
  width: 450px;
  background-color: blue;
}