Archived topic
Space between images in gallery, space between masonry blocks
3 replies · Started by Jason on April 14, 2021
Hi, I've tried endlessly to try and create galleries of images that are spaced closer together. Copied CSS from a half dozen other posts in the forum but to no avail. I've changed container spacing in the customizer as well, but nothing seems to effect the spacing between images or the blocks.
Here's an example: https://curators.live/test/
First section is Wordpress Gallery, second section is individual images in columns, 3rd section is what I'm trying to replicate with the images spaced close together (this 3rd section is made with the Envira Gallery (premium) plugin which I don't want to use).
Thanks!
Hi there,
yeah the core Galleries block really didn't consider gutters - its tricky but try this CSS:
/* Set default gap of 5px */
.wp-block-gallery .blocks-gallery-item {
margin: 0 5px 5px 0;
}
/* adjust gap for 3 column gallery */
/* if above 5px is adjusted then the below 5px need to be matched */
@media (min-width: 600px) {
.wp-block-gallery.columns-3 .blocks-gallery-item {
width: calc(33.33333% - 5px);
margin-right: 5px;
}
.wp-block-gallery.columns-3 .blocks-gallery-item:last-child {
margin-right: 0;
}
}It does mean you need to add an additional CSS rule for each different column count. For example this will update the column gallery:
@media (min-width: 600px) {
.wp-block-gallery.columns-4 .blocks-gallery-item {
width: calc(25% - 5px);
margin-right: 5px;
}
.wp-block-gallery.columns-3 .blocks-gallery-item:last-child {
margin-right: 0;
}
}Super helpful, this works, thanks!
Glad to be of help
