I. Grid Layout
It is said that calling it "Grid Layout" is more appropriate than "Grid System." A "Grid" gives a visual impression of a vertical and horizontal interlaced pattern, whereas some feel "Grid System" (栅格) might only imply the vertical dimension. In fact, grid layout applications are generally only vertical, with fixed column widths, though grid layouts can also fix row heights to achieve a true grid.
At the end of this article, I provide a useful online solution generation tool and a classic 960-width 24-column grid example.
II. Origin
In 1692, the newly crowned King Louis XIV of France felt that the level of French printing was unsatisfactory, so he ordered the establishment of a special Royal Committee to manage printing. Their primary task was to design a new font that was scientific, rational, and focused on functionality.
The committee was led by the mathematician Nicolas Jaugeon. Based on Roman type, they used a grid as the design basis. Each font square was divided into 64 basic square units, and each square unit was further divided into 36 small squares. Thus, a printed page consisted of 2304 small squares. Within this rigorous geometric grid network, they designed the shapes of the fonts, the layout of the pages, and tested the effectiveness of communication functions. This was the world's earliest activity of scientific experimentation on fonts and layouts, and the earliest prototype of the grid system.
Grid layout was first used in the printing industry. For example, newspaper layouts strictly follow grid layouts. The newspaper is divided into content blocks of various sizes, but the overall feeling is comfortable without a scattered or uneven sense. On the other hand, a rigorous layout based on a grid can unify page styles and reduce visual differences between different pages.
Grid layout is mainly used for displaying a large amount of information on web pages, such as the homepage of a portal website, which indeed looks like a newspaper.
III. 960 and Grid Layout
If you have explored grid layouts, you will certainly notice the recurring number 960. Some articles say 960 is related to the golden ratio, but that's not the case.
The 960 width was a choice made by the market. In the 1024x768 era, 960 was roughly the width of a full screen (strictly speaking, the viewport width), and it had nothing to do with the golden ratio.
In 2008, there was a huge wave of 960-width grid layouts, as shown in the table below:
| Website | Homepage Width (px) |
|---|---|
| Yahoo! | 950 |
| Taobao | 950 |
| MySpace | 960 |
| Sina | 950 |
| Netease | 960 |
| Live Search | 958 |
| Sohu | 950 |
| Youku | 960 |
| AOL | 960 |
It can be expected that if screens become wider (resolutions become higher), grid layouts with even larger widths will appear.
IV. Implementation Principles
Let the total width be W, column width be c, column gutter be g, margin be m, and number of columns be N. We get the following formula:
W = c * N + g * (N - 1) + 2 * m
Generally, the gutter width is twice the margin (g = 2m), so the formula can be simplified to:
W = c * N + g * (N - 1) + g = (c + g) * N
Let c + g = C, and the formula becomes very simple:
W = C * N
In classic grid layouts, 950 is the actual width (excluding left and right margins), and 960 is the total width W. It's a very simple arithmetic expression, not mysterious at all. The most common 24-column grid (column width 40px, gutter 8px) is calculated using this simple formula.
V. Tatami Layout
Tatami is Japanese furniture (beds) and follows a 3-row, 4-column grid layout. This is a layout that looks very comfortable, similar to the layouts of Windows Phone and the Windows 8 Metro UI.
By dividing a 3x4 grid, you can obtain 3164 different layouts, which are widely used in content application layouts on tablets.
VI. The Golden Ratio
The golden ratio can be summarized as a mathematical problem: for a line segment of length 1, divide it into two parts, x and 1 - x, such that:
x / 1 = (1 - x) / x
This translates into a simple quadratic equation:
x^2 + x - 1 = 0
The positive solution is:
x = (sqrt(5) - 1) / 2 ~= 0.618
The golden ratio holds a very high status in design, and graphic design is no exception. The golden ratio can also be applied to grid layouts. For example, in a classic 960-width 24-column grid with a column width of 40 and a gutter of 10, the two-column division closest to the golden ratio (363/587) is 9 columns (350) + 15 columns (590).
No comments yet. Be the first to share your thoughts.