THEME COLOR
Theme Style
Layout
Header
Top Dropdown
Sidebar Mode
Sidebar Style
Sidebar Menu
Sidebar Position
Footer

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


Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 1, Column 4
Row 1, Column 5
Row 1, Column 6
Row 1, Column 7
Row 1, Column 8
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
Row 2, Column 4
Row 2, Column 5
Row 2, Column 6
Row 2, Column 7
Row 2, Column 8

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.


m-grid-col-md-1
m-grid-col-md-2
m-grid-col-md-3
m-grid-col-md-6
m-grid-col-md-3
m-grid-col-md-3
m-grid-col-md-3
m-grid-col-md-3
m-grid-col-md-6
m-grid-col-md-3
m-grid-col-md-2
m-grid-col-md-1

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.


Top alignment content
Middle alignment content
Bottom alignment content
Left alignment content
Center alignment content
Right alignment 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

Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 1, Column 4
Row 1, Column 5
Row 1, Column 6
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
Row 2, Column 4
Row 2, Column 5
Row 2, Column 6

Responsive Table Grid with m-grid-responsive-sm

Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 1, Column 4
Row 1, Column 5
Row 1, Column 6
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
Row 2, Column 4
Row 2, Column 5
Row 2, Column 6

Responsive Table Grid with m-grid-responsive-md

Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 1, Column 4
Row 1, Column 5
Row 1, Column 6
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
Row 2, Column 4
Row 2, Column 5
Row 2, Column 6

Responsive Table Grid with m-grid-responsive-lg

Row 1, Column 1
Row 1, Column 2
Row 1, Column 3
Row 1, Column 4
Row 1, Column 5
Row 1, Column 6
Row 2, Column 1
Row 2, Column 2
Row 2, Column 3
Row 2, Column 4
Row 2, Column 5
Row 2, Column 6

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.


Flex order 4
Flex order 3
Flex order 2
Flex order 1

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:


Sample cell with padding
and full height content
Sample cell with padding
and full height content
Sample cell with padding
and full height content
Sample cell with padding
and full height content

Staff

  • 8
    ...

    Bob Nilson

    Project Manager
  • ...

    Nick Larson

    Art Director
  • 3
    ...

    Deon Hubert

    CTO
  • ...

    Ella Wong

    CEO

Customers

  • 2
    ...

    Lara Kunis

    CEO, Loop Inc
    Last seen 03:10 AM
  • new
    ...

    Ernie Kyllonen

    Project Manager,
    SmartBizz PTL
  • ...

    Lisa Stone

    CTO, Keort Inc
    Last seen 13:10 PM
  • 7
    ...

    Deon Portalatin

    CFO, H&D LTD
  • ...

    Irina Savikova

    CEO, Tizda Motors Inc
  • 4
    ...

    Maria Gomez

    Manager, Infomatic Inc
    Last seen 03:10 AM
Bob Nilson 20:15 When could you send me the report ?
Ella Wong 20:15 Its almost done. I will be sending it shortly
Bob Nilson 20:15 Alright. Thanks! :)
Ella Wong 20:16 You are most welcome. Sorry for the delay.
Bob Nilson 20:17 No probs. Just take your time :)
Ella Wong 20:40 Alright. I just emailed it to you.
Bob Nilson 20:17 Great! Thanks. Will check it right away.
Ella Wong 20:40 Please let me know if you have any comment.
Bob Nilson 20:17 Sure. I will check and buzz you if anything needs to be corrected.

General

System

General Settings

  • Enable Notifications
  • Allow Tracking
  • Log Errors
  • Auto Sumbit Issues
  • Enable SMS Alerts

System Settings

  • Security Level
  • Failed Email Attempts
  • Secondary SMTP Port
  • Notify On System Error
  • Notify On SMTP Error