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.
mg-s--hidden
hidden for small screenmg-m--hidden
hidden until medium screenmg-l--hidden
hidden until large screenmg-xl--hidden
hidden until extra large screenmg-s--display
display for small screenmg-m--display
display until medium screenmg-l--display
display until large screenmg-xl--display
display until extra large screenMg+ 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]