flex

Понятный пример flex-wrap: wrap; Всё просто и совсем не сложно.

by akogch

HTML

<div>
  <img src="https://leonardo.osnova.io/36d797fd-a24b-5f84-ae35-4f98298404b1/-/scale_crop/592x/-/format/webp/" alt="">
  <img src="https://leonardo.osnova.io/9de8ff13-0fd8-53fe-9fd2-0c22f216f6f8/-/scale_crop/592x/-/format/webp/" alt="">
  <img src="https://leonardo.osnova.io/3d832920-7e2c-52cc-8d98-b870fc6477a0/-/scale_crop/592x/-/format/webp/" alt="">
  <img src="https://leonardo.osnova.io/ca9b2803-3194-5f8b-84c6-2416ccf9edaf/-/scale_crop/592x/-/format/webp/" alt="">
  <img src="https://leonardo.osnova.io/73e755b4-b27d-5020-813b-a14da634d5c4/-/scale_crop/592x/-/format/webp/" alt="">
  <img src="https://leonardo.osnova.io/03b30b68-b01b-5107-a8f9-f53687c5c9a2/-/scale_crop/592x/-/format/webp/" alt="">
</div>

CSS

div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px solid #000;
  padding: 0;
}

img {
  display: block;
  margin: 2.5px;
  width: calc(50% - 5px);
  height: auto;
}

@media(max-width: 600px) {
  img {
    width: calc(100% - 5px);
  }
}