Magnet

Layout Modes

Magnet position items depending on a layout mode. A layout mode, follows its own layout logic.

Grid

Magnet lays out items using a bin-packing algorithm, creating gapless layouts. By default, this is the layout mode used.

Rows

Magnet lays out items into rows. Rows progress vertically when a row is completed. Arranges items similar to a grid using CSS floats.

Columns

Magnet lays out items into columns. Columns progress horizontally when a column is completed.

Horizontal

Magnet lays out items horizontally. Horizontal layout modes need the container to have a height value:

//Both are valid values
.grid { height: 50%; }
.grid { height: 500px; }

Vertical

Magnet lays out items vertically.