CSS only: Masonry left to right?

1

Hi!

Currently I am working on my first Kirby-homepage.

The basic structure works well.

Now it’s about more features. I would like to have a Masonry-Gallery that works with CSS only. Left-to-right-orientation would be great.

No JavaScript, no Flash, no 3rd-party-server.

Do you have suggestions?

Thank you in advance.

Denis

2

Masonry layouts with CSS alone are incredibly difficult. This is a good start but does end up using a small amount of JavaScript.

3

Thank you, @jimbobrjames! :slight_smile:

I found a solution for my problem! https://codepen.io/chriscoyier/pen/NeRNBO

The only reason I was looking for a right-left orientation was that I wanted to highlight new images. :slight_smile:

My solution:

.masonry {
columns: 350px;
column-gap: 0.6rem;
list-style-type: none;

@for $i from 1 through 36 { 
div:nth-child(#{$i}) {
$h: (random(400) + 100) + px;
height: $h;
line-height: $h;
}
}
}    




<ul class="masonry">
<?php foreach ($page->images()->filterBy('featured', true)->sortBy('sort') as $image): ?>
  <li>
      <a href="<?= $image->url() ?>">
          <?= $image->resize(500) ?>
          <?= $image->caption() ?>
      </a>
  </li>
<?php endforeach ?>
</ul>


<ul class="masonry">
<?php foreach ($page->images()->filterBy('featured', false)->shuffle()  as $image): ?>
  <li>
	  <a href="<?= $image->url() ?>">
	      	<?= $image->resize(500) ?>
			<?= $image->caption() ?>
	  </a>
  </li>
<?php endforeach ?>

So I’m doubling most of the code. :slight_smile:

Now I’ve to figure out, how to add a lightbox when clicking on my image. That’s confusing for me as a beginner. I would like to add this lightbox to the code above: https://codepen.io/gschier/pen/HCoqh

Tipps are welcome. I’m a newbie.

Denis