Flex 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
Hidden effect (s,m,l,xl)
hidden until small screen
hidden until medium screen
hidden until large screen
hidden until extra large screen
display until small screen
display until medium screen
display until large screen
display until extra large screen
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