Is it possible? It is such a simple UI pattern we see used on the web all the time. Let me talk you through the problem:
We want to be able to render a grid of images in such a way, that:
- The grid items are square and have a fixed width and height, with a fixed margin surrounding the image.
- The maximum amount of grid items should fit into the given screen width.
- The grid itself should be centred on the screen, thus the margin on either sides of the grid should be the same.
- The items in the grid are left-aligned.
- The amount of grid items are not predetermined.
- The screen width is not fixed (ie. users can resize on desktop or change the device orientation on mobile)
- This grid should work on all smartphones and desktop browsers.
If we depict these requirements graphically:
And if we look at this problem mathematically, we see that the equation we are trying to satisfy is:
Our end goal is to render something like this on multiple devices in either portrait or landscape satisfying all the requirements in the list:
Let’s start by creating simple HTML markup and CSS as a starting point:
This would output the following:
And it violates:
Nr 3: The grid itself should be centred on the screen, thus the margin on either sides of the grid should be the same.
Usually people’s first impulse would be to add
text-align: center to
.grid. I guess it’s fair enough to try that initially, although at the moment our grid-items are floating left and adding text alignment will actually have no effect. Let’s play devil’s advocate anyway by removing
float: left; from
.grid-item and replace it with
display: inline-block; and add
text-align: center to
This is not a bad solution, it ticks all our boxes, except:
Nr 4: The items in the grid are left-aligned.
People then have an ‘aha!’ moment and add
margin: 0 auto to
.grid. This has no effect as the grid has no fixed width, so no margin can be automatically calculated.
Which then leads people to start adding fixed widths:
Fixed width v 1.0
Let’s assume an iPhone 6 Plus and changing
we get what we wanted!
but as soon as we change the orientation of the device we get:
so now we are failing:
Nr 2: The maximum amount of grid items should fit in the given screen width.
Fixed width v 2.0
Well that’s not a problem, let’s solve it by adding media queries:
So now it works on landscape on iPhone 6 Plus as well!
But we still have that last requirement:
Nr 6: The screen width is not fixed (ie. users can resize on desktop or change the device orientation on mobile)
And no, please do not suggest adding even more media queries.
Fixed width v 3.0
But it’s still oddly unsatisfying.
Now there is one thing we could do that only uses CSS. If we jig the previous equation around a bit we could calculate the GridWidth using:
let’s use that in our CSS:
CSS calc() to the rescue!! Unfortunately it comes with a massive caveat. It is not yet well adopted in mobile browsers, especially Android and also the
is only supported in the latest versions of IE.
Thus we fall over this hurdle:
Nr 7: This grid should work on all smartphones and desktop browsers.
Please comment and let me know! :)