I was going to write up a post about this, but you've beaten me to it ;)
One thing I'd add is, when you add multiple rows of images with the
<div class="pull-left">image.jpg</div> <div class="pull-right">image.jpg</div> it does not have a gap between the two rows. To get around this, add a horizontal rule after the columns eg.
<div class="pull-left">image.jpg</div>
<div class="pull-right">image.jpg</div>
---
<div class="pull-left">image.jpg</div>
<div class="pull-right">image.jpg</div>
I usually do this and then throw a few full size images in to mix it up a bit. This gives you a much cleaner looking 'gallery' with equal spacing.
As said though, you need to make sure your image sizing is the same for each column to keep it even, I just crop all of my images to the same ratio in photoshop to keep them consistent.
You can see in the example image below all of the images in columns are 16:9 and the full width images are different.
Image from my 'Explore Adelaide' account Morialta Conservation Park - Explore Adelaide
RE: Tips & tricks for pimping your Steemit posts