Added a grid-template shorthand example.

javifernandez · javifernandez · commit a3177bdfc918 · 2014-07-08T16:02:29.000+02:00
diff --git a/grid-template-shorthand.html b/grid-template-shorthand.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+
+.grid {
+    display: grid;
+    grid-template: 25px 260px 702px 538px /
+         "top-panel    top-panel    top-panel    top-panel"     32px
+         "top-subpanel top-subpanel top-subpanel top-subpanel"  25px
+         "left-panel   widget-1     widget-2     widget-4"   229px
+         "left-panel   widget-1     widget-2     widget-5"   264px
+         "left-panel   widget-1     widget-3     widget-6"   260px;
+}
+
+.sizedToGridArea {
+    font: 10px/1 Ahem;
+    /* Make us fit our grid area. */
+    width: 100%;
+    height: 100%;
+}
+
+#topPanel {
+   grid-area: top-panel;
+   background-color: blue;
+}
+
+#topSubpanel {
+   grid-area: top-subpanel;
+   background-color: lime;
+}
+
+#leftPanel {
+   grid-area: left-panel;
+   background-color: purple;
+}
+
+#widget1 {
+   grid-area: widget-1;
+   background-color: orange;
+}
+
+#widget2 {
+   grid-area: widget-2;
+   background-color: pink;
+}
+
+#widget3 {
+   grid-area: widget-3;
+   background-color: navy;
+}
+
+#widget4 {
+   grid-area: widget-4;
+   background-color: magenta;
+}
+
+#widget5 {
+   grid-area: widget-5;
+   background-color: red;
+}
+
+#widget6 {
+   grid-area: widget-6;
+   background-color: black;
+}
+
+</style>
+</head>
+<body>
+
+<div class="grid">
+    <div id="topPanel"    class="sizedToGridArea"></div>
+    <div id="topSubpanel" class="sizedToGridArea"></div>
+    <div id="leftPanel"   class="sizedToGridArea"></div>
+    <div id="widget1"     class="sizedToGridArea"></div>
+    <div id="widget2"     class="sizedToGridArea"></div>
+    <div id="widget3"     class="sizedToGridArea"></div>
+    <div id="widget4"     class="sizedToGridArea"></div>
+    <div id="widget5"     class="sizedToGridArea"></div>
+    <div id="widget6"     class="sizedToGridArea"></div>
+</div>
+
+
+</body>
+</html>
diff --git a/grid-template-shorthand.png b/grid-template-shorthand.png
diff --git a/index.html b/index.html
@@ -144,6 +144,16 @@ <h4 class="list-group-item-heading">z-index</h4>
                                 </p>
                                 <p>Example with several overlaping grid items where painting order is defined by the implicit DOM order and different z-index values.</p>
                             </li>
+                            <li class="list-group-item">
+                                <h4 class="list-group-item-heading">Explicit Grid Shorthand: grid-template</h4>
+                                <p>
+                                    <a href="grid-template-shorthand.html" class="label label-primary">example</a>
+                                    <a href="https://github.com/Igalia/css-grid-layout/blob/master/grid-template-shorthand.html" class="label label-success">html</a>
+                                    <a href="https://github.com/Igalia/css-grid-layout/blob/master/grid-template-shorthand.png" class="label label-info">screenshot</a>
+                                    <a href="http://www.w3.org/TR/css-grid/#propdef-grid-template" class="label label-warning">spec</a>
+                                </p>
+                                <p>Example usage of the 'Explicit Grid' shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration.</p>
+                            </li>
                             <li class="list-group-item">
                                 <h4 class="list-group-item-heading">DOM order</h4>
                                 <p>
