xy.css

Blog

Clean grid units

After experimenting with different widths for the xy.css horizontal grid, I’ve settled on 60-pixel columns and 24-pixel gutters. This creates a horizontal grid comprised of 84px-width grid-units. In this article, I explain the mathematics of “clean” grid-units and how they produce a more flexible, extensible, and harmonious grid.

The Maths

In the name, “xy.css”, the “x” refers to the horizontal grid and the “y” refers to the vertical grid. In math, the “x-axis” of a graph is the one that runs left to right, or horizontally. Likewise, the “y-axis” of a graph runs up and down, or vertically. Together, the x-axis and y-axis comprise a two-dimensional grid. If we throw a “z-axis”1 into the mix, we create a 3D Matrix that’s suitable for creating high-fidelity, grid-based designs with CSS.

Each of the three axes (x, y, z) has its origin at zero “0” and is demarcated at regular1 intervals in either positive or negative direction. For CSS grids, each interval corresponds to a grid-unit, which may be subdivided as needed to distinguish between columns and gutters. For example, in xy.css, the grid-units are set every 84 pixels, and are subdivided into columns and gutters at 60px and 24px, respectively.

The Origin

It’s also worth mentioning that, when designing with CSS, each grid-unit may have a positive or negative value, depending on its position relative to the origin, or zero-point. Here’s a quick breakdown of the concept:

So for the z-axis, the plane on which the browser window exists may be taken as the origin. But for the x-axis and y-axis, the definition of origin is relative to the design. For example, if you begin the grid at the left-most edge of the screen, then everything displayed on the screen will correspond to positive grid units. If, on the other hand, the grid begins in the center of the page, then anything on the left will be negative and anything on the right will be positive. Likewise for the y-axis, but only to a degree — you could begin the grid at the bottom or even middle of the page, but it makes more sense to start at the top ;)

For the record, xy.css sets its origin at the top-left corner of the web page, and sticks with the page-level convention when working in 3D grid-space, or 3D CSS Matrix. Setting the origin in the top-left corner simplifies grid-design by keeping (almost) everything positive.

Grid units & widths

In general, the widths of grid-units (columns + gutters) may be the same for all axes (x = y = z), creating a symmetrical grid (as demonstrated here). Or, the width of grid-units may be unique for each axis, creating an asymmetrical grid, as is the case with xy.css. In xy.css:

Note that the z-axis isn’t defined explicitly anywhere in xy.css, and is mentioned here to round out the example. For the dimensional units used for grid-based design, the most common are px, em, and %. While more units are available, these are the “big three” for responsive, grid-based design.

Any unit has its pros and cons, varying from one design scenario to the next. Frequently, ems are useful for fonts, line-heights, margins, and so forth, while percentages are useful for widths, heights, and position. Pixels are excellent for the vertical grid and for fixed-width horizontal grids, but percentages are required for fluid-width horizontal designs, so converting between dimensional units is pretty much a necessity when working on the grid.

Fortunately, unit-conversion is very straightforward and not worth repeating here. Check out Units conversion by factor-label for the gory details, and then bookmark a CSS unit-conversion cheat-sheet for easy reference.

The horizontal “x” grid

With a fresh perspective on the maths involved with grid-based design, we arrive at the main point of the article, which is explaining why the grid-units used in xy.css are considered mathematically harmonious, or “clean”, and how that harmony resonates throughout the horizontal (and vertical) grid.

To illustrate the idea of “clean” grid units, consider a simple horizontal grid comprised of only columns (no gutters). A poor choice for the width of each grid-unit would be any prime number, say 67 pixels. By definition, a prime number is divisible only by 1 and itself, so the grid breaks unless every element aligns at some multiple of 67px. A 67px-grid would be an interesting experiment, but probably prove too inflexible for practical use.

Ideally, each grid unit would be easily divided into subunits, the more possible widths the better. This is why prime-numbers would be silly for grid-based design: because there is no even way to divide them into subunits. Instead, choose a number that is divisible by as many other numbers as possible. For example, in xy.css, the horizontal grid is built with units of 24px (gutter), 60px (column), and 84px (grid), each of which are divisible into numerous subunits according to their respective factors:

Factors of 24 = 1, 2, 3, 4, 6, 8, 12, 24

Factors of 60 = 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60

Factors of 84 = 1, 2, 3, 4, 6, 7, 12, 14 , 21, 28, 42, 84

These factors provide more design flexibility and make it easier for designs to keep the grid. Multiple factors produce a more completely rendered grid with which design elements may align. Further, the numerous factors available in xy.css grid-units better facilitate design on the relative grid and infinite grid, which I’ll be covering in subsequent articles. Stay tuned.

The vertical “y” grid

The “y” grid is simpler than the “x” grid because there is no distinction between “gutter” and “row” — the grid proceeds from one 18-pixel grid-unit to the next, throughout the vertical grid. Each of these 18px vertical units may be divided into subunits according to the factors of 18:

1, 2, 3, 6, 9, 18

So as you’re working with the grid, there is an optimal number of subgrids with which to align design elements. Thus, such grid-units are “clean” in the sense that they facilitate grid-based design with a more completely rendered grid with fewer “glitches” or misaligned elements.

Even cleaner

After choosing grid-units with abundant common factors, it’s important to build the grid with consistency and symmetry in mind. Consistency improves extensibility, while symmetry improves accuracy. Allow me to illustrate with an example “from the wild”3, please examine the following grid system:

/* layout options ( all have margins right & left of 1%) */
.col60  { width: 6.3829787%; } /* width 60px  / grid_1  */
.col140 { width: 14.893617%; } /* width 140px / grid_2  */
.col220 { width: 23.404255%; } /* width 220px / grid_3  */
.col300 { width: 31.914894%; } /* width 300px / grid_4  */
.col380 { width: 40.425532%; } /* width 380px / grid_5  */
.col460 { width: 51.06383%;  } /* width 460px / grid_6  */
.col540 { width: 57.446809%; } /* width 540px / grid_7  */
.col620 { width: 65.957447%; } /* width 620px / grid_8  */
.col700 { width: 74.468085%; } /* width 700px / grid_9  */
.col780 { width: 82.978723%; } /* width 780px / grid_10 */
.col860 { width: 91.489362%; } /* width 860px / grid_11 */
.col940 { width: 100.0%;     } /* width 940px / grid_12 */

Notice the width-values. Some are rounded to six decimals, one is rounded to five decimals, and one is rounded to one decimal place. There is no apparent symmetry amongst these numbers, rather they appear precarious and random — not ideal for precise, grid-based design.

And there’s no reason for it, because grid columns should always divide evenly into the target (or base) grid-width. As a simple example, a grid that is 100px wide built with grid units that are 10px wide produces very “clean” percentages:

.col_10 { width: 10%; }
.col_20 { width: 20%; }
.col_30 { width: 30%; }
.col_40 { width: 40%; }
.col_50 { width: 50%; }
 .
 .
 .

See how the width values are nice and tight whole numbers? That will always be the case when the grid is built with consistency and symmetry in mind. Once you begin doing weird stuff like adding and subtracting margins, however, things begin to fall apart mathematically and the grid becomes too tenuous for serious designs. To wrap things up, here are some more rules of thumb for creating your own “clean” CSS grids:

Following these principles, here is the horizontal grid for xy.css:

Columns: 60px
Gutters: 24px

1     2     3     4     5     6     7     8     9     10     11     12     13     14     15     16     17     18     19     20     21     22     23     24     25     26     27     28     29     30     31     32     33     34     35     36
60    144   228   312   396   480   564   648   732   816    900    984    1068   1152   1236   1320   1404   1488   1572   1656   1740   1824   1908   1992   2076   2160   2244   2328   2412   2496   2580   2664   2748   2832   2916   3000

The horizontal “x” grid produces the following symmetrical column widths:

.x01 { width: 2.000%; }
.x02 { width: 4.800%; }
.x03 { width: 7.600%; }
.x04 { width: 10.40%; }
.x05 { width: 13.20%; }
.x06 { width: 16.00%; }
.x07 { width: 18.80%; }
.x08 { width: 21.60%; }
.x09 { width: 24.40%; }
.x10 { width: 27.20%; }
.x11 { width: 30.00%; }
.x12 { width: 32.80%; }
.x13 { width: 35.60%; }
.x14 { width: 38.40%; }
.x15 { width: 41.20%; }
.x16 { width: 44.00%; }
.x17 { width: 46.80%; }
.x18 { width: 49.60%; }
.x19 { width: 52.40%; }
.x20 { width: 55.20%; }
.x21 { width: 58.00%; }
.x22 { width: 60.80%; }
.x23 { width: 63.60%; }
.x24 { width: 66.40%; }
.x25 { width: 69.20%; }
.x26 { width: 72.00%; }
.x27 { width: 74.80%; }
.x28 { width: 77.60%; }
.x29 { width: 80.40%; }
.x30 { width: 83.20%; }
.x31 { width: 86.00%; }
.x32 { width: 88.80%; }
.x33 { width: 91.60%; }
.x34 { width: 94.40%; }
.x35 { width: 97.20%; }
.x36 { width: 100.0%; }

For more details, see the xy.css stylesheet.

References

Comments

Comments are closed.