I started with this justified image gallery which seems to work fine.
.gallery { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px;}.child { flex: 1 1 auto;}.child a { display: flex; height: 200px; width: 100%;}img { object-fit: cover; height: 100%; flex: 1 1 auto;}.child a:hover { filter: brightness(0.95);}<div class="gallery"><div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a></div><div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a></div><div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a></div><div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a></div><div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div><div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a></div><div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a></div><div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a></div><div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a></div><div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a></div></div>Then, I wanted to add captions. After a lot of tinkering, I have the code below with link and caption. It seemed like it could work.
.gallery { display: flex; flex-wrap: wrap; gap: 5px;}.child { display: grid;}.child a { grid-column: 1; grid-row: 1; display: flex; height: 200px; width: 100%;}img { object-fit: cover; height: 100%; flex: 1 1 auto;}.caption { grid-column: 1; grid-row: 1; align-self: end; text-align: left; padding: 1em; color: white; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));}.child a:hover { filter: brightness(0.95);}<div class="gallery"><div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a><div class="caption">Lorem ipsum dolor sit amet.</div></div><div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a><div class="caption">Qui nobis exercitationem</div></div><div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a><div class="caption">Est quas dolores.</div></div><div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a><div class="caption">Qui nihil aliquid.</div></div><div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div><div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a><div class="caption">Nam internos?</div></div><div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a><div class="caption">Eos saepe soluta et nesciunt aperiam.</div></div><div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a><div class="caption">Sed dolor tempore sit pariatur earum et.</div></div><div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a><div class="caption">Ea voluptatum nulla ut eveniet voluptate. </div></div><div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a><div class="caption">Rem libero asperiores. </div></div></div>But it fails with long captions.
.gallery { display: flex; flex-wrap: wrap; gap: 5px;}.child { display: grid;}.child a { grid-column: 1; grid-row: 1; display: flex; height: 200px; width: 100%;}img { object-fit: cover; height: 100%; //flex: 1 1 auto;}.caption { grid-column: 1; grid-row: 1; align-self: end; text-align: left; padding: 1em; color: white; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); //width: 300px;}.child a:hover { filter: brightness(0.95);}<div class="gallery"><div class="child"><a href="https://placehold.co/600x400.png"><img src="https://placehold.co/600x400.png"></a><div class="caption">Lorem ipsum dolor sit amet. Ut corrupti voluptatem non quia voluptatum ut dolorem voluptates ut dicta labore eos saepe molestiae et aperiam tempora.</div></div><div class="child"><a href="https://placehold.co/400x600.png"><img src="https://placehold.co/400x600.png"></a><div class="caption">Qui nobis exercitationem nam quisquam excepturi qui minus necessitatibus eum veritatis minus.</div></div><div class="child"><a href="https://placehold.co/400x700.png"><img src="https://placehold.co/400x700.png"></a><div class="caption">Est quas dolores ut odio commodi aut dolorum ipsum.</div></div><div class="child"><a href="https://placehold.co/500x400.png"><img src="https://placehold.co/500x400.png"></a><div class="caption">Qui nihil aliquid et fuga molestias qui consectetur corrupti.</div></div><div class="child"><a href="https://placehold.co/900x400.png"><img src="https://placehold.co/900x400.png"></a></div><div class="child"><a href="https://placehold.co/400x900.png"><img src="https://placehold.co/400x900.png"></a><div class="caption">Nam internos perspiciatis et quae numquam ea doloribus nesciunt?</div></div><div class="child"><a href="https://placehold.co/700x400.png"><img src="https://placehold.co/700x400.png"></a><div class="caption">Eos saepe soluta et nesciunt aperiam qui ducimus consectetur aut libero nesciunt ab voluptas unde qui asperiores animi.</div></div><div class="child"><a href="https://placehold.co/600x600.png"><img src="https://placehold.co/600x600.png"></a><div class="caption">Sed dolor tempore sit pariatur earum et consequatur mollitia ad earum voluptatum ut fugiat consequatur aut eligendi voluptate. Id fugiat aliquid et porro quod et galisum rerum sed fugiat totam At voluptate temporibus.</div></div><div class="child"><a href="https://placehold.co/800x400.png"><img src="https://placehold.co/800x400.png"></a><div class="caption">Ea voluptatum nulla ut eveniet voluptate eos expedita omnis. Aut obcaecati voluptatum sed quia consequatur et enim porro non vero quibusdam est pariatur dolores est quia aspernatur. </div></div><div class="child"><a href="https://placehold.co/500x300.png"><img src="https://placehold.co/500x300.png"></a><div class="caption">Rem libero asperiores sit tempora reiciendis qui quidem reprehenderit est ipsa delectus. Id quidem perspiciatis id repellat animi ut sunt nihil. </div></div></div>I want to modify this to be able to handle longer captions obviously. Also I am open to ideas on improving the css. I used flex here for the gallery only because I couldn't get to it work with grid. So if there is a better solution with just grid, I am all for it.
What is the best way to do this while keeping the initial justified (ie; row-wise, fixed height, free width) grid layout? It would also be nice if it could work the other way column-wise (ie; masonry, fixed width, free height) layout.