Modular grids - work best for more complex problems where columns alone don’t offer enough flexibility.Column grids - work well when the information being presented is discontinuous and different types of information can be placed in different columns.Manuscript grids - are the simplest and they work well when presenting large continuous blocks of text or images.Each has a different function as far as holding content and choosing the right grid to use should come down to the content for your specific project. The 4 grids above are the main types of grids you’ll encounter. Final Words on Grid Systems for Graphic Designers The above suggests a hierarchical grid, more organic than built on a rigid structure. Rows of information aren’t divided equally and across these variable rows, the column widths differ. In the above example, elements on The Swish Life website are tightly aligned, but not with any grid attempted to overlay on top. Hanglines and baselines can help create where diverse elements will be situated vertically within the columns. Moreover follow lines can be utilized in column grids to help set the subordinate structure or to take into consideration irregular.įlowlines can be used in column grids to help set the subsidiary format or permitting unusual breaks in images and text. There are no hard core rules, but generally if the size of the gutter is taken to be x, then margin is usually set to be 2x. However if the margins are narrower than gutters, the eye is directed outward and give rise to a complex situation. Column GuttersĪt the point when the margins are more extensive than the gutters between columns the eye is guided inward & strain is eased. If a column is too narrow or wide, then it’s become difficult to read them. A column should have the capacity to oblige a measure for reading and maintain a strategic distance from excessive hyphenation towards the end of lines. The width of a column should rely upon some components internal to the design, probably the size of the text. This prompts a lot of adaptability when arranging information on the page. See the below given example of a practical use of grid system in layouting.Ĭolumns can be dependent on one another, autonomous from one other, and traversed by designing elements. It is important to always look for balance when using an asymmetric layout. In an asymmetric layout, both margins and columns can be different from one another. Columns in a symmetric layout are also the same width. The vertical margins are equal to each other, as are the horizontal ones. Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes.Īll layout grids can be designed in two ways: symmetric or asymmetric. In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page.

Essentially grids are of four types, namely: These subdivisions lay the basis of a modular & systematic methodology to the layout, especially for multipage records, making the configuration process faster along with ensuring visual consistency between related pages. Typically, a grid is an arrangement of horizontal and vertical lines that are utilized to subdivide a page vertically and evenly into margins, segment (columns), inter-column spaces, type lines and spaces between blocks of type & images. A Grid represents a framework of spaced bars that are parallel to or cross one other, a grinding.” Grids in interactive design can also help provide a consistent experience across multiple devices with different screen sizes. It’s a tried and tested technique that first found favour in print layout. One of the easiest ways to achieve an organized design is to apply a grid system.

Different grid types