Grid Design

• A grid system is a way of providing a system that designers can work with to structure and present content and imagery in a much more readable and manageable way.
• This structure is done by giving horizontal and vertical lines which intersect and are then used to arrange content.
• Using grid design it help us to achieve level of consistency and uniformity.





• Grid system is something which invisible to your final user its only visible at the time of developing.
• In web design there are many grid system are available to us like CSS and Bootstrap.

Types

Menuscript grid

• Sometimes called block grid or single column grid, it is a simplest grid structure.
• It’s mainly a large rectangular area taking up most of the space inside a format.
• The primary structure is defined by large text blocks and margins, which position the block within the format.
• Secondary structure defines the location and proportions of folios, footnotes, running headers, and other secondary information.
• These are used in books, long essay, blogs and magazines.

Column grid

• Column grids are made up by placing multiple columns within the format.
• Columns can be dependent on each other, independent from each other and crossed over by design elements.
• The width of a column should depend on some element internal to the design, most likely the size of the text.
• Column grids are good when discontinuous information needs to be presented.

Modular grid

• Modular grids are like column grids with the addition of horizontal divisions marked by rows.
• Each module in the grid can define a small chunk of information.
• Modular grids are good for complex projects that require more control than a column grid can offer.
• They can help standardize the space in tables and help integrate tables with any surrounding text or images.
• These are used to design tabular information such as charts, forms, navigation, schedules, and of course tables of data.

Hierarchical grid

• They are based more on an intuitive placement of elements, which still conforms to the needs of the information.
• They are created organically by first placing design elements on the page and then finding a rational structure for presenting those elements.
• Hierarchical grid are commonly found in web.

Advantages

• Grid creates a fresh structure means clean and organized.
• Easy to create and navigate.
• Make infographics with no effort.
• Grid helps line up everything.
• Grids are highly flexible.
• Balancing your design will get significantly easier.
• Its develop equilibrium with symmetric layout.
• Its help you to go diagonal.

Disadvantages

• The use of a grid requires a decent amount of content and visual elements.
• Its need lot of math calculations.

Examples