I've been experimenting with pure CSS (Bootstrap 4) to create a tiled gallery layout.
To achieve this, I've been utilizing the flexbox capabilities provided by Bootstrap through classes like d-flex
and flex-wrap
.
While everything seems to be working smoothly when using only <img>
tags,
I encountered an issue when trying to enclose the images within an <a>
tag in order to link them to a lightbox - it seems to disrupt the gallery's display.
To better illustrate the problem, here's a snippet of my code: https://codepen.io/cray_code/pen/RMrbzK
I have attempted applying similar CSS styles as used for the img
tags, but unfortunately, it hasn't resolved the issue.
As an additional inquiry, I'm wondering if there is a way to enforce a two-column layout for the gallery. The final image appears almost square, yet displays as a widescreen rectangle.