Est. 1999 - Chicago, USA

February 2012

My Adaptive Grid

My take on a fully adaptive 24 columns grid for the web.

#css #adaptive #grids

Let me start off by saying that I am not a big fan of ready-made template systems of any kind when it comes to design. Sure, they may save you a bit of time and some may provide an excellent starting point, but relying heavily on them feels a little like cheating to me. I think that each design challenge is unique and deserves a one of a kind set of solutions.

With that out of the way (and since quite a few people have asked about it) I would like to share some details about the adaptive grid system that I am using right here on this site. If you do find it useful and it is a good match for something you are working on, feel free to borrow some of the ideas behind it or grab the entire grid altogether.

24 Columns and Full Pixels

Since responsive web design and adaptive CSS grids seem to be two very hot topics at the moment, there are quite a lot of other examples out there. My main gripe was that responsive design is all about percentages and being flexible. The problem is I like round numbers and, being a bit of a control freak, I also like it when things are pixel-perfect. For this reason, my grid uses only integer values. I also hate it when a grid system becomes too constrictive; for maximum flexibility, I am using a 24 column system.

From 1,920 pixels, all the way down to 240

At 100%, the grid has a full width of 1,200 pixels. Each column is 30 pixels wide with 10 pixel gutters on each side. The table below shows all potential break points and respective widths.

Percentage

Total width

Column width

Gutter width

160%

1,920

48

16

140%

1,680

42

14

120%

1,440

36

12

100%

1,200

30

10

90%

1,080

27

9

80%

960

24

8

60%

720

18

6

50%

600

15

5

40%

480

12

4

30%

360

9

3

20%

240

6

2

The main advantage with this type of grid comes from using rounded percentages. As long as an object is aligned to the grid, it should downscale or upscale in pixel-perfect fashion. Furthermore, you’ll be able to easily calculate its size at any of the page widths above by multiplying it by its respective percentage. For maintaining the same harmony with vertical proportions I recommend using a similarly rounded-out baseline grid, 20 pixels high at 100%, for example.

What about 320?

You’ll notice a lot of the standard screen widths being present or covered in the table above, with one significant exception: 320 pixels wide, which is a common mobile screen. The problem is the numbers don’t exactly work out in that case as 320 is 26.666% of 1,200. I was comfortable enough leaving out that breakpoint in my case but, should you really need one at 320, the workaround that I am suggesting is using the grid scaled at 25%. The columns are no longer integers, at 7.5 pixels each, but it works out fine if you consider the whole thing a 12 column grid. Who needs 24 columns at that size anyway? In that case, the numbers work out like this:

Percentage

Total width

Column width

Gutter width

25%

300

7.5

2.5

It should also be noted that going bigger than 100% is not an issue and, as the widths will always scale as integers, the number of potential breakpoints is much larger. I haven’t had the need to go over 1,200 pixels wide so far, but your mileage may vary. And who knows, soon there might be devices out there to challenge that.