adding additional css tables example

chrisdavidmills · chrisdavidmills · commit 3e86fe25dbc9 · 2016-10-07T10:12:48.000+01:00
diff --git a/css/css-layout/grids/css-tables-as-grid.html b/css/css-layout/grids/css-tables-as-grid.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS tables example rewritten as CSS grid</title>
+    <style>
+    html {
+      font-family: sans-serif;
+    }
+
+    form {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-gap: 5% 10px;
+      /*grid-column-gap: 5%;
+      grid-row-gap: 10px;*/
+      width: 508px;
+      margin: 0 auto;
+    }
+
+    form label {
+      grid-column: auto / span 2;
+      text-align: right;
+    }
+
+    form input {
+      width: 100%;
+      grid-column: auto / span 3;
+    }
+
+    form p {
+      grid-column: auto / span 5;
+      grid-row: 4;
+      color: #999;
+      font-style: italic;
+    }
+    </style>
+  </head>
+  <body>
+    <form>
+    <p>First of all, tell us your name and age.</p>
+      
+        <label for="fname">First name:</label>
+        <input type="text" id="fname">
+      
+      
+        <label for="lname">Last name:</label>
+        <input type="text" id="lname">
+      
+      
+        <label for="age">Age:</label>
+        <input type="text" id="age">
+      
+    </form>
+  </body>
+</html>
