Kirby Online Demo, Portfolio example — Strange behavior in Chrome Browser (Mac)


I’m not sure if the question is directly kirby related, but I found a strange behavior within the instant online demo displayed in chrome browser.
I wanted to achieve sth. similar to the instant online demo – portfolio example (Try | Kirby CMS – Instant Online Demo). It works fine in Safari, but when I open the example in Chrome the image grid on the right side is stacked strangely (see screenshots). When I reload the site it displays perfectly. When I resize the browser the strange stacking appears again. After reloading it displays in perfect order again.

Has anyone experienced the same with the Instant online demo or can reproduce the behavior?
Does anyone have an idea, how to fix it?

System: MacOS 12.3.1
Browser: Chrome Version 102.0.5005.61

Any help or ideas highly appreciated… Thanks!

That’s the corresponding code for the example found on GitHub:


    <h1 class="intro"><?= $page->title()->escape() ?></h1>

    <div class="grid">

        <div class="column text" style="--columns: 4">
            <?= $page->text()->kt() ?>

        <div class="column" style="--columns: 8">
            <ul class="portfolio-project-gallery">
                <?php foreach ($page->images()->sortBy('sort') as $image) : ?>
                        <a href="<?= $image->url() ?>" data-lightbox>
                            <figure class="img" style="--w:<?= $image->width() ?>;--h:<?= $image->height() ?>">
                                <?= $image->resize(800) ?>
                <?php endforeach ?>



.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
.grid > .column {
  margin-bottom: var(--gutter);

.portfolio-project-gallery {
  line-height: 0;
  columns: 1;
  column-gap: 1.5rem;

.portfolio-project-gallery li {
  display: block;
  margin-bottom: 1.5rem;
  break-inside: avoid;

@media screen and (min-width: 60rem) {
  .portfolio-project-gallery {
    columns: 2;

strange behavior when loading page in chrome:

(looks perfect when refreshing the page.
Looks strange again when resizing…
looks perfect again on refresh…)

Seems to be an issue with Chrome. I first tested with the Chrome version I had installed ( something), where this didn’t happen. Then I noticed you had a newer version and updated my Chrome, and voilá, I can reproduce it.

Hey. Thanks a lot @texnixe for the fast reply and for testing (and reproducing)… Do you have by any chance an idea if there might be a nifty workaround to fix this within the current chrome version? If not I’m hoping for the next update of the chrome browser :crossed_fingers: :wink:

Seems to be a problem with columns, see also: Chrome broke my CSS/HTML with Version 102.0.5005.61 - Stack Overflow

Thanks a lot for the hint! I’ll give it a try asap…

Getting rid of the display: block; property seems to fix it…
Thanks again @texnixe for the hint!