top of page

Grid layout design principle

Works on print and on web, such as books, magazines, articles and posters all require grids as guidelines. Grids are like invisible glue which holds the design together, and arrange the elements in their positions. Below are some terms related to grid layout:

Gutter: the space between columns of text

Column inch: the vertical length of a text column

Jump: the continuation of a flow of text from the bottom of one column to the top of another, or onto another page when one column is not enough to fit all the text

Rail: a thinner column (typically about half the width of the other columns) at the far left or far right of a page, typically providing directory information for, say, a newspaper.

Hang line: like a horizontal rail, this is a line that separates information at the top of a page (such as an image, for example), from the text below, which seems to “hang” from the line

Single column grid: such as what you would find in a typical book

Multi-column (vertical) grid: such as what you would find in a typical newspaper

Modular grid: a grid that involves about as many horizontal divisions as it does vertical ones, making for an especially flexible model of text and image arrangement

Works Cited

Bigman, Alex. History of the design grid. 12 November 2014. Web. 13 November 2015. <https://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1/>.

Hampton-Smith, Sam. The designer's guide to grid theory. 15 April 2014. Web. 13 November 2015. <http://www.creativebloq.com/web-design/grid-theory-41411345>.

Lupton, Ellen. Grid. 2009. Web. 13 November 2015. <http://www.thinkingwithtype.com/contents/grid/>.


 Recent   
 Posts  
bottom of page