The grid system is an aid, not a guarantee.
It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid. It is an art that requires practice.
What is a Layout Grid in UI Design?
A grid is made up of columns, gutters, and margins that provide a structure for the layout of elements on a page. There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid. The column, modular, and hierarchical grid are commonly used in interfaces.
Points to keep in mind
Base Unit
The base unit defines what every measurement will be a
multiple of.
Sizing
The height and width of UI elements should be measured in increments of the base unit (i.e. 8, 16, 24) when possible.
Padding
Padding refers to the space between UI elements and is also measured in increments of the base unit.
Grid Anatomy
All grids are made up of three elements: columns, gutters,
and margins
Grid Types
Manuscript Grid
Column Grid
Modular Grid
Baseline Grid
Breakpoints
Breakpoints give designers and developers an easy way to control the layout of a design as it scales up from mobile to desktop.
Breakpoints
- Less than 24 characters Small (0px-599px)
- Start with a verb Medium (600px-899px)
- Large (900px-1199px)
- Extra large (1200px and up)
