<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="nav-bar"></div> <div class="dam-intake"> <div class="normal"></div> <div class="critical"></div> <div class="water-quality2"></div> </div> <div class="production2"> <div class="wtp"></div> <div class="active"></div> <div class="capacity"></div> <div class="chemical"></div> <div class="electrical"></div> <div class="water-quality"></div> </div> <div class="network"> <div class="RBP"></div> <div class="pipe-length"></div> <div class="burst"></div> </div> <div class="nrw-graph"></div> <div class="map"></div> <div class="customer"> <div class="complaints"></div> <div class="domestic-industry"></div> <div class="domestic-industry-usage"></div> </div> <div class="alarm"></div> <div class="low-pressure"></div> <div class="dma"></div> <div class="reservoir"></div> <div class="booster"></div> <div class="production3"></div> <div class="dam-intake2"></div> <div class="fr"> <div class="johor"></div> <div class="raw-water"></div> <div class="production"></div> <div class="consumption"></div> <div class="nrw"></div> <div class="SPAN"></div> </div> </div>

.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(10, 1fr); gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar nav-bar" "fr fr fr fr fr fr fr fr fr fr fr fr" "dam-intake dam-intake dam-intake dam-intake map map map map dam-intake2 dam-intake2 customer customer" "dam-intake dam-intake dam-intake dam-intake map map map map dam-intake2 dam-intake2 customer customer" "production2 production2 production2 production2 map map map map production3 production3 customer customer" "production2 production2 production2 production2 map map map map booster booster customer customer" "production2 production2 production2 production2 map map map map reservoir reservoir alarm alarm" "production2 production2 production2 production2 map map map map dma dma alarm alarm" "network network network network nrw-graph nrw-graph nrw-graph nrw-graph low-pressure low-pressure alarm alarm" "network network network network nrw-graph nrw-graph nrw-graph nrw-graph low-pressure low-pressure alarm alarm"; } .nav-bar { grid-area: nav-bar; } .dam-intake { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "normal critical water-quality2"; grid-area: dam-intake; } .normal { grid-area: normal; } .critical { grid-area: critical; } .water-quality2 { grid-area: water-quality2; } .production2 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "wtp active capacity" "chemical electrical water-quality"; grid-area: production2; } .wtp { grid-area: wtp; } .active { grid-area: active; } .capacity { grid-area: capacity; } .chemical { grid-area: chemical; } .electrical { grid-area: electrical; } .water-quality { grid-area: water-quality; } .network { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "RBP pipe-length burst"; grid-area: network; } .RBP { grid-area: RBP; } .pipe-length { grid-area: pipe-length; } .burst { grid-area: burst; } .nrw-graph { grid-area: nrw-graph; } .map { grid-area: map; } .customer { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "complaints" "domestic-industry" "domestic-industry-usage"; grid-area: customer; } .complaints { grid-area: complaints; } .domestic-industry { grid-area: domestic-industry; } .domestic-industry-usage { grid-area: domestic-industry-usage; } .alarm { grid-area: alarm; } .low-pressure { grid-area: low-pressure; } .dma { grid-area: dma; } .reservoir { grid-area: reservoir; } .booster { grid-area: booster; } .production3 { grid-area: production3; } .dam-intake2 { grid-area: dam-intake2; } .fr { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "johor raw-water production consumption nrw SPAN"; grid-area: fr; } .johor { grid-area: johor; } .raw-water { grid-area: raw-water; } .production { grid-area: production; } .consumption { grid-area: consumption; } .nrw { grid-area: nrw; } .SPAN { grid-area: SPAN; } @media all and (-ms-high-contrast:none) { .container { display: -ms-grid; -ms-grid-columns: repeat(12, 1fr); -ms-grid-rows: repeat(10, 1fr); } .nav-bar { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 12; } .dam-intake { display: -ms-grid; -ms-grid-columns: repeat(3, 1fr); -ms-grid-rows: 1fr; -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 4; } .normal { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .critical { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .water-quality2 { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .production2 { display: -ms-grid; -ms-grid-columns: repeat(3, 1fr); -ms-grid-rows: repeat(2, 1fr); -ms-grid-row: 5; -ms-grid-row-span: 4; -ms-grid-column: 1; -ms-grid-column-span: 4; } .wtp { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .active { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .capacity { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .chemical { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .electrical { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .water-quality { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .network { display: -ms-grid; -ms-grid-columns: repeat(3, 1fr); -ms-grid-rows: 1fr; -ms-grid-row: 9; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 4; } .RBP { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .pipe-length { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .burst { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .nrw-graph { -ms-grid-row: 9; -ms-grid-row-span: 2; -ms-grid-column: 5; -ms-grid-column-span: 4; } .map { -ms-grid-row: 3; -ms-grid-row-span: 6; -ms-grid-column: 5; -ms-grid-column-span: 4; } .customer { display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: repeat(3, 1fr); -ms-grid-row: 3; -ms-grid-row-span: 4; -ms-grid-column: 11; -ms-grid-column-span: 2; } .complaints { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .domestic-industry { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .domestic-industry-usage { -ms-grid-row: 3; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .alarm { -ms-grid-row: 7; -ms-grid-row-span: 4; -ms-grid-column: 11; -ms-grid-column-span: 2; } .low-pressure { -ms-grid-row: 9; -ms-grid-row-span: 2; -ms-grid-column: 9; -ms-grid-column-span: 2; } .dma { -ms-grid-row: 8; -ms-grid-row-span: 1; -ms-grid-column: 9; -ms-grid-column-span: 2; } .reservoir { -ms-grid-row: 7; -ms-grid-row-span: 1; -ms-grid-column: 9; -ms-grid-column-span: 2; } .booster { -ms-grid-row: 6; -ms-grid-row-span: 1; -ms-grid-column: 9; -ms-grid-column-span: 2; } .production3 { -ms-grid-row: 5; -ms-grid-row-span: 1; -ms-grid-column: 9; -ms-grid-column-span: 2; } .dam-intake2 { -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 9; -ms-grid-column-span: 2; } .fr { display: -ms-grid; -ms-grid-columns: repeat(6, 1fr); -ms-grid-rows: 1fr; -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 12; } .johor { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .raw-water { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .production { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .consumption { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 4; -ms-grid-column-span: 1; } .nrw { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; } .SPAN { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 6; -ms-grid-column-span: 1; } }