Htykuut

I am building a photo album. Each photo is a tile with an image (uniform size) and a title and description (not uniform size). There is a "toggle" switch that will display the tiles either "flush", or "stacked". I do not know the total number of tiles beforehand.

I think I can do the "flush" version, but I am new to grids and maybe got it wrong. I am totally at a loss for the "stacked" example code.

Flush Version

I want to display them, 3 across, then wrap. But when they wrap, I need them to start again at the bottom of whatever was the deepest tile in the row above. (See Option 1 image below, and this codepen link to see it in action.)

div.tri-grid {

  overflow: hidden;

  grid-gap: 1em;

  display: grid;

  grid-template-columns: 33% 33% 33%;

  grid-template-rows: repeat(3,auto);

  align-content: space-around;

  justify-content: space-between;

  overflow: hidden;

}



.tile {

  background-color: #ccc; 

  padding: 1em;

}



.tile-1 { height: 200px; }

.tile-2 { height: 160px; }

.tile-3 { height: 180px; }

.tile-4 { height: 100px; }

.tile-5 { height: 150px; }

.tile-6 { height: 195px; }

<div class="tri-grid">

  <div class="tile tile-1">

  tile 1

  </div>

  <div class="tile tile-2">

  tile 2

  </div>

  <div class="tile tile-3">

  tile 3

  </div>

  <div class="tile tile-4">

  tile 4

  </div>

  <div class="tile tile-5">

  tile 5

  </div>

  <div class="tile tile-6">

  tile 6

  </div>

</div>

Option 1 image

Stacked Version

In some instances, I again want to display 3 across, but when they wrap, have them "fit into" the row above. I am calling this "stacked".(See Option 2)

Option 2 image

Two caveats:
I want to use as little CSS and HTML as possible.
And I want to use as much of the same CSS as possible. (I am hoping the CSS will be the same, but with one or two different properties.)