Your browser does not support JavaScript!
Grid Layout

The grid component is a simplified method for laying out content for multiple screen sizes.

A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:

  • If a cell doesn't fit in the row in one of the screen sizes, it flows into the following line.
  • If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.

Create space between elements on the page. The space can be set to be any number of vertical pixels