<!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>