title: CSS-Grid Image Gallery Layout Bottom Baseline is inconsistent for different screen sizes
body: <p>I am currently experimenting with layouts for my photography website and I want to use CSS Grid Layout because I can reorder images for different screen sizes in a very flexible way. I am aware, that this layout can be achieved with flex or even with divs set to <code>dispay: inline-block</code> as well, however that solution does not allow me to flexibly reorder the images.</p>
  
  <p><a href="https://i.stack.imgur.com/KAVPd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KAVPd.jpg" alt="Portfolio Showcase"></a></p>
  
  <p>It looks fine like this, however if I resize my browser window or just display it on another screen, the bottom baseline get's screwed up as seen in the following picture.</p>
  
  <p><a href="https://i.stack.imgur.com/vXKYC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vXKYC.jpg" alt="Bottom Baseline Messed Up"></a></p>
  
  <p>This is how the relevant HTML looks</p>
  
  <pre><code>&lt;div class="galleryblock"&gt;
          &lt;div class="image1"&gt;&lt;img src="static/photos/plansee-glow.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image2"&gt;&lt;img src="static/photos/giaupass.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image3"&gt;&lt;img src="static/photos/eibsee.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image4"&gt;&lt;img src="static/photos/hintersee.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image5"&gt;&lt;img src="static/photos/marilena.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image6"&gt;&lt;img src="static/photos/jack.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image7"&gt;&lt;img src="static/photos/loser-cassi.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image8"&gt;&lt;img src="static/photos/plansee-hype.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image9"&gt;&lt;img src="static/photos/obersee-huette.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image10"&gt;&lt;img src="static/photos/plansee-birdseye.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image11"&gt;&lt;img src="static/photos/mariagern.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image12"&gt;&lt;img src="static/photos/neuschwanstein.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image13"&gt;&lt;img src="static/photos/Kirkjufell2.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image14"&gt;&lt;img src="static/photos/eibsee-bruecke.jpg" alt=""&gt;&lt;/div&gt;
          &lt;div class="image15"&gt;&lt;img src="static/photos/obersee-mood.jpg" alt=""&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the relevant CSS</p>
  
  <pre><code>div.galleryblock{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 1fr 0.81fr 1fr 0.81fr 1fr;
  
  
      grid-template-areas:
          "img1  img2  img3 img4   img5"
          "img1  img7  img3 img9   img5"
          "img6  img7  img8 img9   img10"
          "img6  img12 img8 img14  img10 "
          "img11 img12 img13 img14 img15";
  
      grid-gap: 0.5em;
  }
  </code></pre>
  
  <p>And all the divs with class image1 to image15 get assigned to the respective grid template area by using <code>grid-area: imgX;</code>.</p>
  
  <p>I am aware, that the images have different aspect ratios, while the landscape format pictures are 3:2, the portrait format pictures are 4:5. However, every column should be of equal height because the sum of the pictures (1 landscape and 2 portrait) is always the same. If I divide the height of a landscape format picture by the height of a portrait format picture, I get 0.8 as the kind ratio between the heights. That's why I experimented with values around <code>0.81fr</code> and <code>0.84fr</code> in my css for <code>grid-template-rows</code>. Depending on the screen size one of those values works perfectly or messed up the baseline.</p>
  
  <p>I also experimented with using divs that have the photos as the background image, but then I will have to manually set the height with JavaScript and that's something I'd like to avoid if possible. I looked through different attributes for css grid but I could not find anything that just truncates the image if it's too long and provides a fixed bottom baseline.</p>
  
  <p>Is my use case just not possible for grid layout because of the different height content? In productions I would have blocks like this repeated. I know I could use a column layout with flex, but in smaller screens this would push the images that are on the top right very far down and I would prefer to have the images that come first on the big screen to also come first on smaller screens, if you know what I mean.</p>
  
  <p>Thanks a lot in advance for actually investing time in my problem, I would not have posted this if I didn't try to solve it myself with a lot of trying and failing and googling.</p>