<!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;
} @keyframes fadeOut { 0% {
opacity: 1;
} 50% { transform: scale(1.5) rotateX(90deg) ;
} 100% {
opacity: 1;
} } .item:hover {
animation: fadeOut 1s;
} .container .item:first-child {
-ms-grid-column: 2;
-ms-grid-row: 2;
background-image: linear-gradient(45deg,yellow 0%,green 50%,blue 100%); } .container .item:nth-child(2) {
-ms-grid-column: 4;
-ms-grid-row: 2;
background-image: linear-gradient(225deg,yellow 0%,green 50%,blue 100%);
} .container .item:nth-child(3) {
-ms-grid-column: 6;
-ms-grid-row: 2; background-image: radial-gradient(circle,yellow 0%,green 50%,blue 100%);
} .container .item:nth-child(4) {
-ms-grid-column: 2;
-ms-grid-row: 4;
background-image: radial-gradient(ellipse,yellow 0%,green 50%,blue 100%); } .container .item:nth-child(5) {
-ms-grid-column: 4;
-ms-grid-row: 4;
background-image: radial-gradient(farthest-side at 40px 40px,yellow 0%,green 50%,blue 100%);
} .container .item:nth-child(6) {
-ms-grid-column: 6;
-ms-grid-row: 4;
background-image: radial-gradient(closest-side at 140px 140px,yellow 0%,green 50%,blue 100%);
} </style>
</head>
<body> <div class='container' data-bind='foreach:people'>
<div class='item' data-bind='text:item'> </div> </div> </body>
</html>
