Metronic Grid System Metronic's custom grid system
Use Metronic's Custom Grid System to build any type of UI blocks or elements that require easy vertical or horizontal content alignment and auto full height adjustment with flex column ordering support.
No JS is required and all is powered with pure CSS.
Adjusted Table With Equal Height Cells
Column Sizing
Use m-grid-col-[device_width]-[size] class where [device_width] can be xs
< 480px, sm
< 768px, md
< 992px, lg
< 1260px and [size] can be within 1-12 grid size.
Column Alignment
Use m-grid-col-top, m-grid-col-middle and m-grid-col-bottom classes to vertically align the cell content. Use m-grid-col-left, m-grid-col-center and m-grid-col-right classes to horizontally align the cell content.
Responsive Table Grid
Use m-grid-responsive-xs, m-grid-responsive-sm, m-grid-responsive-md or m-grid-responsive-lg classes to stack the columns to vertical position for respective device
widths(*-xs
< 480px, *-sm < 768px, *-md < 992px, *-lg < 1260px). Try to resize your browser to see how it works.
Responsive Table Grid with m-grid-responsive-xs
Responsive Table Grid with m-grid-responsive-sm
Responsive Table Grid with m-grid-responsive-md
Responsive Table Grid with m-grid-responsive-lg
Responsive Table Grid With Flex Cell Ordering
Use m-grid-flex and m-grid-responsive-xs, m-grid-responsive-sm, m-grid-responsive-md or m-grid-responsive-lg classes to stack the columns to vertical
position for respective device widths(*-xs
< 480px, *-sm < 768px, *-md < 992px, *-lg < 1260px) with defined cell flex ordering using m-grid-col-order-[order_number] where [order_number] can be within 1-12. Try to resize your browser to see how it works.
Full Height Inner Content
Use m-grid m-grid-full-height class to make grids full height. Also you can use nested grids to control vertical position of the content as shown below:
and full height content
and full height content
and full height content
and full height content
