UI - Grid

> User Interface (GUI)

1 - About

A Grid is a layout and an element of responsive design

  • 12 columns are just enough for all needed customization

3 - Elements: Container, Row, Column

4 - 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

5 - Library

  • 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.

6 - Documentation / Reference