Add named grid lines example

mrego · mrego · commit 1935fb6d61e4 · 2015-06-10T14:25:18.000+02:00
diff --git a/index.html b/index.html
@@ -104,6 +104,16 @@ <h4 class="list-group-item-heading">Grid areas</h4>
                                 </p>
                                 <p>Example usage of grid areas.</p>
                             </li>
+                            <li class="list-group-item">
+                                <h4 class="list-group-item-heading">Named grid lines</h4>
+                                <p>
+                                    <a href="named-grid-lines.html" class="label label-primary">example</a>
+                                    <a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/named-grid-lines.html" class="label label-success">html</a>
+                                    <a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/named-grid-lines.png" class="label label-info">screenshot</a>
+                                    <a href="http://www.w3.org/TR/css-grid/#named-lines" class="label label-warning">spec</a>
+                                </p>
+                                <p>Example usage of named grid lines.</p>
+                            </li>
                             <li class="list-group-item">
                                 <h4 class="list-group-item-heading"><tt>max-content</tt> and <tt>min-content</tt></h4>
                                 <p>
diff --git a/named-grid-lines.html b/named-grid-lines.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="css/grid.css" rel="stylesheet">
+    <style>
+        .grid {
+            -webkit-grid-template-rows: [top] 100px [main] 1fr [footer] 50px [bottom];
+            -webkit-grid-template-columns: [left nav] 200px [middle main] 1fr [right];
+            grid-template-rows: [top] 100px [center] 1fr [footer] 50px [bottom];
+            grid-template-columns: [left nav] 200px [middle main] 1fr [right];
+            width: 600px;
+            height: 400px;
+        }
+
+        #title {
+            -webkit-grid-row: top;
+            grid-row: top;
+            -webkit-grid-column: left / right;
+            grid-column: left / right;
+        }
+
+        #nav {
+            -webkit-grid-row: main / bottom;
+            grid-row: main / bottom;
+            -webkit-grid-column: nav;
+            grid-column: nav;
+        }
+
+        #main {
+            -webkit-grid-row: main;
+            grid-row: main
+            -webkit-grid-column: main;
+            grid-column: main;
+        }
+
+        #footer {
+            -webkit-grid-row: footer;
+            grid-row: footer;
+            -webkit-grid-column: middle;
+            grid-column: middle;
+        }
+    </style>
+</head>
+<body>
+    <div class="grid">
+      <div id="title">title</div>
+      <div id="nav">nav</div>
+      <div id="main">main</div>
+      <div id="footer">footer</div>
+    </div>
+</body>
+</html>
diff --git a/named-grid-lines.png b/named-grid-lines.png
