<!DOCTYPE html> <html> <head> <title></title> <script src="js/jq.js"></script> <script src="js/ko.js"></script> <script src="resources/lib/core.js"></script> <script src="resources/lib/nav.js"></script> <script src="js/index.js"></script> <style> .container { width: 620px; height: 415px;; display: -ms-grid; -ms-grid-columns: 5px(200px 5px ) [ 3 ]; -ms-grid-rows: 5px(200px 5px ) [ 2 ]; border: 1px solid red; } .item { width: 200px; height: 200px; line-height: 200px; text-align: center;; border: 1px solid deepskyblue; } .item:nth-child(odd){ background: cornflowerblue; color:white; } .item:nth-child(even){ background: darkslategray; color:white; } .container .item:first-child { -ms-grid-column: 2; -ms-grid-row: 2; } .container .item:nth-child(2) { -ms-grid-column: 4; -ms-grid-row: 2; } .container .item:nth-child(3) { -ms-grid-column: 6; -ms-grid-row: 2; } .container .item:nth-child(4) { -ms-grid-column: 2; -ms-grid-row: 4; } .container .item:nth-child(5) { -ms-grid-column: 4; -ms-grid-row: 4; } .container .item:nth-child(6) { -ms-grid-column: 6; -ms-grid-row: 4; } .container .item:nth-child(7) { -ms-grid-column: 2; -ms-grid-row: 6; } </style> </head> <body> <div class='container' data-bind='foreach:people'> <div class='item' data-bind='text:item'> </div> </div> </body> </html>