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 @r00sj3 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
what if you put 2 images below each other in 1 left div and 2 in the right div. It might work to not have to use the divider (
---). Didn't try it, but is gut feeling ;)okay, so I tried it in a draft and it works. So there is a way around the small grey line ;)
ah ha, never thought of that, and it means less
<div>shave to be put in.The
<hr>is still useful if you want to add a full size photo in there too though.... I'm going to have to change how I do mine ;)