Web dev: Responsive image grid (that is not perfect but works)

Worth noting and well working way to implement photo grid on website, is presented by Ali Jarafian on his website:

http://alijafarian.com/responsive-image-grids-using-css/

The ‘float: left;‘ type of design has few drawbacks in my opinion:

• One is that you need to calculate the margins carefully and put the calculation result in few places in css (so changing the margin requires change in few places in css file).
• And the second is that when one of the items is accidentally higher than the rest, the grid will not scale properly – I mean that one grid element will seem to be empty. This is because it will move to next grid cell if it cannot fit to the previous one.

Nevertheless that works. Personally Implement such kind of layouts without <ul> but on divs instead of <li>. This is simply because <li> are not beneficial for me – <div> is enough. I find <li> beneficial when business logic requires to append() or prepend() new items. In my project (static photo gallery) it is not a case.