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

26 07 2014

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


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.



Give Your feedback:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: