UI - Grid

Card Puncher Data Processing


A Grid is a layout and an element of responsive design

  • 12 columns are just enough for all needed customization

Elements: Container, Row, Column

Grid Row Container Column


Grid Example

Classes of the following box within a 12 columns grid are:

  • Top Red Box: row
  • Top Blue Box: col-6
  • Bottom Red Box: row
  • Bottom Blue Box: col-4


  • https://masonry.desandro.com/ - Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Documentation / Reference

Discover More
Page Heatmap Eye
UI - Layout (laid out) - Composition relationship

A layout defines the visual structure for a user interface. It's another term for the definition of the composition relationship of UI elements. See also: From a word doc..., note...
Guide Vs No Guide
Viz - Grid

in Viz. A grid is a series of guide located at the same interval. A Reference Grid Improves the Likelihood of Perceiving a Difference Between Shapes A and B. See

Share this page:
Follow us:
Task Runner