Magnet UI

Grid

Grid is used to divide the view into different sections of different sizes.

Grid 50-50 Layout

Add class grid (common) to display as grid and class grid-50-50 to display view as two equal parts. You can aslo add class gap-1rem to give gap of 1rem between two columns.

Column 1
Column 2

Grid 30-70 Layout

Add class grid (common) to display as grid and class grid-30-70 to display view as two sections, one of 30 and other of 70. You can aslo add class gap-1rem to give gap of 1rem between two columns.

Column 1
Column 2

Grid with 3 columns Layout

Add class grid (common) to display as grid and class grid-3-column to display view as three equal columns. You can aslo add class gap-1rem to give gap of 1rem between two columns.

Column 1
Column 2
Column 2

Grid Layout Module

Add class grid (common) to display as grid and class grid-container to display view as shown below. You can aslo add class gap-1rem to give gap of 1rem between two columns.

Header
Main