Gutenberg FIX – image gallery item on last row too big

Quick CSS fix for multi-column image gallery issues where images are shown too big when they’re alone in the last row.

It’s a super annoying bug that’s been around for over a year now. I have now idea when the official WordPress core will fix it but these will do for now.

Option #1 – inherit flex-grow

.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
  flex-grow: inherit;
}

The gallery items have flex-grow which causes it to expand to full width if it doesn’t have images on all columns. You can paste this code into the “Customizer > Additional CSS”.

Option #2 – margin-right on the last-child

You can just add margin-right: auto to the :last-child of your gallery item. Inspect the image item, copy the class/selector into Customizer > Additional CSS, and apply margin-right: auto. This one didn’t work for my specific case but might for you.