Responsive Gallery with Spacing

Here’s a bit more info on making galleries responsive and dealing with spacing. Spacing can be a puzzle if you want gaps between columns but you’d still like the outer edges to fit your container.

Here’s some sample CSS that does the job:

Margin is applied to the right of each item and adjusted to suit the screen width. Adding this margin to the overall gallery width allows the right-hand column to fit up to the edge of the container.

Since we’re trampling all over the native gallery it’s probably a good idea to disable the native styles and set the image size by adding this snippet to functions.php: