Add WebKit prefixes to grid-placement.html example

Author: mrego

grid-placement.html

@@ -5,9 +5,13 @@
     <style>
         .grid {
             background: none;
+            -webkit-grid-template-columns: [left] 200px [main-start] 100px [center] 100px 100px [main-end] 50px 50px [right];
             grid-template-columns: [left] 200px [main-start] 100px [center] 100px 100px [main-end] 50px 50px [right];
+            -webkit-grid-template-rows: [top title-start] 50px [title-end main-start] 200px [main-end center] 150px 100px [bottom];
             grid-template-rows: [top title-start] 50px [title-end main-start] 200px [main-end center] 150px 100px [bottom];
+            -webkit-grid-auto-columns: 50px;
             grid-auto-columns: 50px;
+            -webkit-grid-auto-rows: 50px;
             grid-auto-rows: 50px;
             font-family: monospace;
             font-weight: bold;
@@ -33,7 +37,9 @@
             height: 100%;
             box-sizing: border-box;
 
+            display: -webkit-grid;
             display: grid;
+            -webkit-grid: 100% / 100%;
             grid: 100% / 100%;
             justify-items: center;
             align-items: center;
@@ -43,78 +49,97 @@
             background: rgba(242,46,138, 0.8);
             border: 5px solid rgb(242,46,138);
 
+            -webkit-grid-column: -8;
             grid-column: -8;
+            -webkit-grid-row: -7;
             grid-row: -7;
         }
 
         #item-2 {
             background: rgba(98,205,217, 0.8);
             border: 5px solid rgb(98,205,217);
 
+            -webkit-grid-column: -1 / span 2;
             grid-column: -1 / span 2;
+            -webkit-grid-row: span 2 / 1;
             grid-row: span 2 / 1;
         }
 
         #item-3 {
             background: rgba(117,191,6, 0.8);
             border: 5px solid rgb(117,191,6);
 
+            -webkit-grid-column: span 2 / center;
             grid-column: span 2 / center;
+            -webkit-grid-row: auto / 1;
             grid-row: auto / 1;
         }
 
         #item-4 {
             background: rgba(242,226,5, 0.8);
             border: 5px solid rgb(242,226,5);
 
+            -webkit-grid-column: 1 / -1;
             grid-column: 1 / -1;
+            -webkit-grid-row: title;
             grid-row: title;
         }
 
         #item-5 {
             background: rgba(242,54,12, 0.8);
             border: 5px solid rgb(242,54,12);
 
+            -webkit-grid-area: main;
             grid-area: main;
         }
 
         #item-6 {
             background: rgba(166,0,62, 0.8);
             border: 5px solid rgb(166,0,62);
 
+            -webkit-grid-column: 5 / span right;
             grid-column: 5 / span right;
+            -webkit-grid-row: auto / center;
             grid-row: auto / center;
         }
 
         #item-7 {
             background: rgba(22,129,141, 0.8);
             border: 5px solid rgb(22,129,141);
 
+            -webkit-grid-column: span bar / 9;
             grid-column: span bar / 9;
+            -webkit-grid-row: center;
             grid-row: center;
         }
 
         #item-8 {
             background: rgba(41,115,0, 0.8);
             border: 5px solid rgb(41,115,0);
 
+            -webkit-grid-column: span 2 / 2;
             grid-column: span 2 / 2;
+            -webkit-grid-row: -2;
             grid-row: -2;
         }
 
         #item-9 {
             background: rgba(166,150,0, 0.8);
             border: 5px solid rgb(166,150,0);
 
+            -webkit-grid-column: center / right;
             grid-column: center / right;
+            -webkit-grid-row: 5 / 4;
             grid-row: 5 / 4;
         }
 
         #item-10 {
             background: rgba(166,0,0, 0.8);
             border: 5px solid rgb(166,0,0);
 
+            -webkit-grid-column: center;
             grid-column: center;
+            -webkit-grid-row: bottom / span bottom;
             grid-row: bottom / span bottom;
         }