After following this guide, I attempted to recreate the photo grid with some spacing between the images. Changing the column-gap property to 3px did add horizontal space, but is there a way to include vertical gaps as well? Any suggestions or solutions would be appreciated! Here's the link to the codepen.
column-gap: 3px;
row-gap: 3px /* ??? */
UPDATE: The image grid is created by:
line-height: 0;
and
column-count: <any value>
column-gap: 0;
applied to the container/parent and
width: 100% !important;
height: auto !important;
for the images/children.
Here is the HTML code used:
<section id="photos">
/* Images here */
</section>
The CSS styling for the layout:
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 3px;
-moz-column-count: 5;
-moz-column-gap: 3px;
column-count: 5;
column-gap: 3px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
UPDATE 2: Despite trying line-height, it seems to only utilize half the available space. Additionally, margin-bottom and padding-bottom create extra spaces at the bottom of each column. It's challenging to change their color as well; using border-bottom might offer more flexibility in this aspect. However, it also leaves unwanted spaces at the end of every column.