Responsive Grids

This section showcases the functionality of grid elements in our design system. Grids are used to create a responsive layout for the application. Below, you will find examples of how to use the grid system to create a variety of layouts.

Row sizing and placement
x4
x3
x2
x1
x6
x12
x6 offset3
x6 start
x6 end
Responsibve Row sizing
x6
s12
m12
l12
Hidden effect (s,m,l,xl)
mg-s--hiddenhidden for small screen
mg-m--hiddenhidden until medium screen
mg-l--hiddenhidden until large screen
mg-xl--hiddenhidden until extra large screen
Display effect (s,m,l,xl)
mg-s--displaydisplay for small screen
mg-m--displaydisplay until medium screen
mg-l--displaydisplay until large screen
mg-xl--displaydisplay until extra large screen
Progressive display example
Exclusive display example
Row alignment
start
x4
x3
x2
x1
center
x4
x3
x2
x1
end
x4
x3
x2
x1
Col alignment
top
x4
x4
middle
x4
x4
bottom
x4
x4
Row grow
x4 grow
x4
x4 grow
x4
x4 grow
x4
Gap

Mg+ uses a modular system to define the gap between elements with rem based unit (0 to 10rem) mg-gap-[0-10] mg-row-gap[0-10] mg-row-gap[0-10]

x3
x3
x3
x3
x3
x3