Chapter 4 - 4.1. examples uploaded

dinanathsj29 · web-flow · commit 10471e3cfeb5 · 2020-01-12T22:44:23.000+05:30
diff --git a/_examples-css-grid/4.1-demo-mosaic-layout.html b/_examples-css-grid/4.1-demo-mosaic-layout.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>4.1-demo-mosaic-layout.html</title>
+
+    <style type="text/css">
+
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: verdana;
+      }
+
+      .main-container {
+        width: 1000px;
+        margin: 0 auto;
+
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-auto-rows: minmax(100px, auto); /* 4.1.2 - 150px */
+        grid-gap: 10px;
+
+        /* 4.1.2 */
+        /* transform: rotate(45deg) scale(0.5);   */
+      }
+
+      .item {
+        background-color: #1e90ff;
+        color: #ffffff;
+        font-size: 1rem;
+        padding: 0.75rem;
+        text-align: center;
+      }
+
+      .item-1 {
+        grid-column: 1/3;
+        grid-row: 1/5;
+      }
+
+      .item-2 {
+        grid-column: 3/7;
+        grid-row: 1/3;
+      }
+
+      .item-3 {
+        grid-column: 3/5;
+        grid-row: 3/5;
+      }
+
+      .item-4 {
+        grid-column: 5/7;
+        grid-row: 3/7;
+      }
+
+      .item-5 {
+        grid-column: 1/5;
+        grid-row: 5/7;
+      }
+    </style>
+
+  </head>
+
+  <body>
+
+    <div class="main-container">
+      <div class="item item-1">item-1</div>
+      <div class="item item-2">item-2</div>
+      <div class="item item-3">item-3</div>
+      <div class="item item-4">item-4</div>
+      <div class="item item-5">item-5</div>
+    </div>
+    
+  </body>
+  
+</html>
