Grid lets arrange massive of various content into the nice-looking dynamic system, adaptive to display at any device. It consists of several elements:


  • Guides: lines to nail down the content
  • Columns: vertical lines of the grid
  • Rows: horizontal lines of the grid
  • Margins: the space around the content
  • Gutters: the rooms between columns
  • Modules: the space units, formed by the crossing of rows and columns


There are several types of grid, too. Hierarchical focuses on the size relation between the elements often built intuitively or following the golden ratio rules. It is efficient to use with untypical content, which does not repeat itself. 


The column grid is based on columns, and the most spread in web design, as the screen width has edges and height seems endless. The one popular is of 12 columns.


The modular grid is based on the space units and considered to be the most sophisticated species. The modular grid is mostly used in digital media, where the ‘card’ content displaying is desirable.


share the term