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.