JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<header>Das ist das Menü</header>
<div class="main">
  <div>
    <div>
      <img src="https://i.pinimg.com/736x/75/3f/aa/753faa891785c533e1f8ce4456e438ec--wolf-spirit-spirit-animal.jpg" alt="">
      
      <img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg" alt="">
      
      <img src="https://caching-production.jetzt.de/files/56519922215172420-welpe-patrick-pleul-dpa.full.jpg" alt="">
      
    </div>
    <div>
      <img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg" alt="">
      
      <img src="https://i.pinimg.com/736x/75/3f/aa/753faa891785c533e1f8ce4456e438ec--wolf-spirit-spirit-animal.jpg" alt="">
      
      <img src="https://caching-production.jetzt.de/files/56519922215172420-welpe-patrick-pleul-dpa.full.jpg" alt="">
    </div>
    <div>
      <img src="https://caching-production.jetzt.de/files/56519922215172420-welpe-patrick-pleul-dpa.full.jpg" alt="">
      
      <img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg" alt="">
      
      <img src="https://i.pinimg.com/736x/75/3f/aa/753faa891785c533e1f8ce4456e438ec--wolf-spirit-spirit-animal.jpg" alt="">
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  overflow-y: hidden;
}

.main {
  display: flex;
  justify-content: center;
  align-content: center;
}

.main > div {
  overflow-y: scroll;
  max-height: calc(100vH - 30px);
  max-width: calc(100% - 30px);
  background: white;
}

.main > div > div {
  width: calc(33.33% - 10px);
  display: inline-block;
}

.main img {
  width: 100%;
}

@media only screen 
and (max-width: 600px) {
    .main > div > div {
      width: 100%;
      display: block;
    }
}