.grid
     -var i = 0;
     while i < 13
          .grid-item
          - i++

     .grid-fallback Your browser does not support CSS Grid Layout. Use Firefox 52, Chrome 57, Safari 10.1 or newer.

html, body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     background: #ccc;
}

.grid {
     display: grid;
     width: 100%;
     height: 100%;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(3, 1fr);
     grid-gap: 1.5em;
     padding: 1em;
     box-sizing: border-box;

     &-item {
          background: white;
          border-radius: 0.25em;
          box-shadow: 0 5px 15px 0 rgba(0,0,0,0.15);
          transition: all 0.2s;
          cursor: pointer;

          &:hover {
               transform: scale(1.05);
               box-shadow: 0 10px 15px 5px rgba(0,0,0,0.15);
          }
          &:nth-child(5n){
               background: #ccffff;
          }
          &:nth-child(5n+1){
               background: #ffccff;
          }
          &:nth-child(5n+2){
               background: #ffffcc;
          }
          &:nth-child(5n+3){
               background: #ccccff;
          }
          &:nth-child(5n+4){
               background: #ccffcc;
          }
          &:nth-child(1){
               background: white;
               grid-row-start: 1;
               grid-row-end: 3;
          }
          &:nth-child(7){
               background: white;
               grid-column-start: 3;
               grid-column-end: 5;
               grid-row-start: 2;
               grid-row-end: -1;
          }
          &:last-child {
               background: white;
               grid-column-start: 5;
               grid-column-end: -1;
          }
     }
     &-fallback {
          display: none;
          width: 75%;
          max-width: 500px;
          font-family: Helvetica Neue, sans-serif;
          font-size: 1.2em;
          font-weight: 300;
          text-align: center;
          color: #555;
          line-height: 1.6em;
     }

     @supports not (display: grid){
          display: flex;
          justify-content: center;
          align-items: center;

          &-item {
               display: none;
          }
          &-fallback {
               display: block;
          }
     }
}