CSS grid for horizontal gallery not displaying correctly

This might be more of a CSS issue than a Kirby issue. Please let me know if it’s not appropriate to post such queries here and I’ll find somewhere else to ask :slight_smile:

I’m experimenting with creating a horizontally scrolling gallery page for my Kirby site which resizes the images automatically to fit the page height. I’m trying to do it with CSS Grid so I can vertically center some info text, and create auto columns for foreach loops to display however many images are in each album, with captions underneath if there are any. It’s working pretty well but I’ve got a display bug I can’t seem to crack.

Here’s how the gallery looks in Chrome and Safari (this is how I intend it to look):

But here’s how it renders in Firefox (both regular and developer editions)…

I added the red background to the CSS to visualise the unwanted extra space being added.

Here’s a live test:

http://kirby.simonpanrucker.com/photos/st-pauls-carnival-2019-grid

Here’s my html:

    <div class="album-grid">
    
<div class="info-card">
    <h1><?= $page->title() ?></h1>
    <p><?= $page->text() ?></p>
    <a href="<?= $page->parent()->url()?>">&larr; Back to Photos</a>
</div>


    <?php foreach ($page->images() as $image): ?>
        
        <div class="photo-card">
            <a href="<?= $image->url() ?>">
            <img src="<?= $image->url() ?>" alt="<?= $image->title() ?>">
            </a>
        </div>
        <div class="photo-caption">
            <?= $image->caption() ?>
</div>
    <?php endforeach ?>

<div class="end-card">
    <a href="<?= $page->parent()->url()?>">&larr; Back to Photos</a>
</div>

</div>

Here’s my CSS:

    .album-grid {
    display: grid;
    grid-template-rows: 5vh 87vh 8vh;
    grid-template-columns: auto;
    grid-auto-flow: column;
    grid-column-gap: 15px;    
}

.info-card {
    width: 500px;
    text-align: center;
    padding: 2em;
    align-self: center;
    grid-row: 2;

}

.photo-card img {
    height: 100%;
    width: auto;
}

.photo-card {
    grid-row: 2;
    width: auto;
    height: 100%;
    background-color: red;
}



.photo-caption {
    grid-row: 3;
    width: 100%;
    padding: 1vh;
    text-align: left;
}

.end-card {
    width: 500px;
    text-align: center;
    padding: 2em;
    align-self: center;
    grid-row: 2;

}

Any ideas why this is happening? Weird that it’s happening just in Firefox. Is this even the best way to achieve the result I’m after? I’m an amateur coder and learning as I go - only just found out about CSS grid which seems awesome!

Any help would be much appreciated, thanks!

just add height 87vh to your image and maybe an object-fit cover

1 Like

Im not really awake yet, but i think the issue is grid-template-columns: auto, which i think makes them all as wide as the widest photo in firefox. You can try being more specific about the column width or make the image fill the column.

.photo-card img {
    height: 100%;
    width: 100%;
object-fit: cover;
}

Jen Simmons from Mozzilla did a few great videos introducing CSS grid and how to use it. Might be worth a watch. https://www.youtube.com/playlist?list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1

Racheal Andrew did a whole bunch too.

That worked a treat, thanks @Constantin! So was the issue that the image was trying to take up 100% of the whole window height, and the width was widening to fit or something?

@jimbobrjames thanks for your suggestion too. I tried it but it had unexpected consequences and all the images were squidged up into really narrow columns! :stuck_out_tongue:

Those videos look really useful! I’ve watched Rachel Andrews intro to CSS grid videos on Skillshare, she teaches the basics quickly and clearly :slight_smile:

Many thanks to both of you for taking the time to look and respond, I really appreciate it.

1 Like