July 13, 2020 by admin

Simple Grids

A Basic Theory Of Grids

Whether you work in print or in web and mobile design, you need to understand the basics of grid theory.

ANATOMY OF A GRID

Whether simple or complex, all grids have some common parts:

  • Format
    The format is the area in which the design is placed. In a paper book, the format is the page. On the web, the format is the size of the browser window.
  • Margins
    Margins are the negative space between the edge of the format and the outer edge of the content.
Margin for a block of content
Margin for a block of content
  • Columns and alleys
    In its the most basic form, a grid is made up of two main components: columns and alleys. Columns are the building blocks of grids. The space between columns is referred to as alleys. Together, columns and alleys take up the horizontal width of the screen.
The space between columns is referred to as alleys.
The space between columns is referred to as alleys.
  • Modules
    Modules are individual units of space created from the intersection of columns and rows (i.e. the horizontal equivalents of columns).
Modules are units created from the intersection of rows and columns.
Modules are units created from the intersection of rows and columns.

1. Know Your Grid Anatomy

grid for web design

1. Columns

design grid columns

2. Rows

rows

3. Modules

design grid modules

4. Gutters

design grid gutters

5. Margins

design grid margins

2. Choose the Right Grid Layout

grids in web design

https://www.nngroup.com/articles/using-grids-in-interface-designs/

https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/