Search code examples
htmlcsscss-grid

CSS-Grid Image Gallery Layout Bottom Baseline is inconsistent for different screen sizes

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 dispay: inline-block as well, however that solution does not allow me to flexibly reorder the images.

Portfolio Showcase

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.

Bottom Baseline Messed Up

This is how the relevant HTML looks

<div class="galleryblock">
        <div class="image1"><img src="static/photos/plansee-glow.jpg" alt=""></div>
        <div class="image2"><img src="static/photos/giaupass.jpg" alt=""></div>
        <div class="image3"><img src="static/photos/eibsee.jpg" alt=""></div>
        <div class="image4"><img src="static/photos/hintersee.jpg" alt=""></div>
        <div class="image5"><img src="static/photos/marilena.jpg" alt=""></div>
        <div class="image6"><img src="static/photos/jack.jpg" alt=""></div>
        <div class="image7"><img src="static/photos/loser-cassi.jpg" alt=""></div>
        <div class="image8"><img src="static/photos/plansee-hype.jpg" alt=""></div>
        <div class="image9"><img src="static/photos/obersee-huette.jpg" alt=""></div>
        <div class="image10"><img src="static/photos/plansee-birdseye.jpg" alt=""></div>
        <div class="image11"><img src="static/photos/mariagern.jpg" alt=""></div>
        <div class="image12"><img src="static/photos/neuschwanstein.jpg" alt=""></div>
        <div class="image13"><img src="static/photos/Kirkjufell2.jpg" alt=""></div>
        <div class="image14"><img src="static/photos/eibsee-bruecke.jpg" alt=""></div>
        <div class="image15"><img src="static/photos/obersee-mood.jpg" alt=""></div>
    </div>

And this is the relevant CSS

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;
}

And all the divs with class image1 to image15 get assigned to the respective grid template area by using grid-area: imgX;.

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 0.81fr and 0.84fr in my css for grid-template-rows. Depending on the screen size one of those values works perfectly or messed up the baseline.

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.

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.

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.

Solution

  • Using align-self: end for the bottom images solved the problem. This means, that the gaps between the images won't be exactly the same, but it's not visible unless you look really really closely.