In our previous blog, we discussed the various parts of a grid such as a column, row, gutter, modules, margin, etc., and by combining these elements in different ways you can produce distinct types of grids.
A layout grid can be of one of 5 kinds, to be used as per the design requirements, they are as follows.
- Manuscript Grid
- Column Grid
- Modular Grid
- Baseline Grid
- Hierarchical Grid
Manuscript Grid
Manuscript grid is the most simplified version of the grid. It is a single grid that defines the area in a page where the text or images can be placed. In earlier days, the manuscript grid was used in traditional book design or while presenting large, continuous blocks of text or images. The layout of the left and the right page are mirror images of each other.
Column Grid
Column grid is also very popular amongst both graphics as well as a web designer. In the column grid, you can break the page in a few vertical columns according to your design requirements. Increasing the number of columns gives more flexibility to the design. Choosing the number of columns is totally dependent on the amount and type of content and how you want to distribute the content so that it is legible.
In the column grid, content and images are placed as per the vertical flow of lines and make up the columns. Placement of images may vary as per the design requirements and can be placed over one or more columns. The gutter space should be consistent throughout the layout.
Column grid is most popular in magazines and newspapers, and it performs well when the content being presented is discontinuous, placing different information in different columns.
There are two types of column grids that are used in a design – Symmetric Column Grid and Asymmetric Column Grid. In symmetric column grid, the width of each column in the layout is equal. On the other hand, in the asymmetric column grid, columns are divided according to the design need.
Modular Grid
Modular grid provides more flexibility to the layout design by subdividing the column grid horizontally. Due to its flexible nature, it is able to solve complex design problems where columns alone don’t offer enough flexibility.
A multicolumn grid divides the page vertically into a number of columns but a modular grid subdivides a page both vertically and horizontally into modules. Each module in the grid can contain a small piece of data or content, in the case of larger content the adjacent modules can be combined to fit the content. Modular grid is useful while designing an e-commerce website.
Baseline Grid
A baseline grid is a series of horizontal lines distributed inside the layout area while maintaining an equal gap between each line. This ensures that each text line should sit at the bottom of a horizontal line which brings more consistency in the design layout. We can easily check the baseline alignment of design for perfect execution. Baseline grids are usually used in combination with column grids to make sure that the lines of text in each column align uniformly across the layout. A sheet of ruled paper, used by school students is a perfect example of a baseline grid.
Hierarchical Grid
Hierarchical grid is the most flexible grid as compared to other grids and is used when the other grid forms do not fit well to solve the design problem. The hierarchical grid comprises two superimposed grids or other additional grid elements. It is useful while organizing content according to their importance. So basically we can organize rows as well as columns, often overlapping each other, thus creating more scope for content and if organized thoughtfully, we can create a more dynamic layout.
There is no mathematical formula or fixed rules to choose any particular type of grid to solve a design problem. One can only learn from experience on how to choose the best grid type for a given design requirement. Each type of grid has some benefits and solves certain design problems. It is up to the designer which route they follow to solve certain design problems.
