grid-basic

Signed-off-by: raja <[email protected]>
raja8287 · Oct 25, 2021 · d40444d · d40444d
1 parent 8ad4144
commit d40444d
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/grid1.html b/grid1.html
@@ -0,0 +1,48 @@
+<head>
+    <style>
+        .contanier{
+            display: grid;
+            grid-gap: 20px;
+            grid-template-columns: repeat(2,1fr);
+            grid-template-rows: 300px;;
+            grid-template-areas:'a b c '
+                                'd e f';
+
+            justify-content: end;
+         }
+        .contanier div{
+            background:red;
+        }
+        .item1{
+            grid-area: a
+        }
+        .item2{
+            grid-area: b
+        }
+        .item3{
+            grid-area: c
+        }
+        .item4{
+            grid-gap: d
+        }
+        .item5{
+            grid-gap: e
+        }
+        .item6{
+            grid-gap: f
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="contanier">
+        <div class="item1">item1</div>
+        <div class="item2">item2</div>
+        <div class="item3">item3</div>
+        <div class="item4">item4</div>
+        <div class="item5">item5</div>
+        <div class="item5">item6</div>
+    </div>
+    <div></div>
+</body>