diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6bea11d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grid Layout</title>
+
+     <style>
+        
+        .parent {
+            display: grid;
+            grid-template-columns: repeat(10, 1fr);
+            grid-template-rows: repeat(6, 1fr);
+            gap: 0;
+            border: 2px solid black;
+        }
+
+        .parent > div {
+            border: 1px solid black;
+        }
+            
+        .div1 {
+            grid-row: span 2 / span 2;
+        }
+
+        .div2 {
+            grid-column: span 8 / span 8;
+        }
+
+        .div3 {
+            grid-column-start: 10;
+        }
+
+        .div4 {
+            grid-column-start: 10;
+            grid-row-start: 2;
+        }
+
+        .div5 {
+            grid-column-start: 2;
+            grid-row-start: 2;
+        }
+
+        .div6 {
+            grid-column-start: 3;
+            grid-row-start: 2;
+        }
+
+        .div7 {
+            grid-column-start: 8;
+            grid-row-start: 2;
+        }
+
+        .div8 {
+            grid-column-start: 9;
+            grid-row-start: 2;
+        }
+
+        .div9 {
+            grid-column: span 4 / span 4;
+            grid-column-start: 4;
+            grid-row-start: 2;
+        }
+
+        .div10 {
+            grid-row: span 2 / span 2;
+            grid-row-start: 3;
+        }
+
+        .div11 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-row-start: 3;
+        }
+
+        .div17 {
+            grid-column-start: 4;
+            grid-row-start: 3;
+        }
+
+        .div18 {
+            grid-column-start: 5;
+            grid-row-start: 3;
+        }
+
+        .div19 {
+            grid-column-start: 6;
+            grid-row-start: 3;
+        }
+
+        .div20 {
+            grid-column-start: 7;
+            grid-row-start: 3;
+        }
+
+        .div21 {
+            grid-column-start: 4;
+            grid-row-start: 4;
+        }
+
+        .div22 {
+            grid-column-start: 5;
+            grid-row-start: 4;
+        }
+
+        .div23 {
+            grid-column-start: 6;
+            grid-row-start: 4;
+        }
+
+        .div24 {
+            grid-column-start: 7;
+            grid-row-start: 4;
+        }
+
+        .div25 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-column-start: 8;
+            grid-row-start: 3;
+        }
+
+        .div26 {
+            grid-row: span 2 / span 2;
+            grid-column-start: 10;
+            grid-row-start: 3;
+        }
+
+        .div27 {
+            grid-row-start: 5;
+        }
+
+        .div28 {
+            grid-column-start: 1;
+            grid-row-start: 6;
+        }
+
+        .div29 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-column-start: 2;
+            grid-row-start: 5;
+        }
+
+        .div30 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-column-start: 4;
+            grid-row-start: 5;
+        }
+
+        .div31 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-column-start: 6;
+            grid-row-start: 5;
+        }
+
+        .div32 {
+            grid-column: span 2 / span 2;
+            grid-row: span 2 / span 2;
+            grid-column-start: 8;
+            grid-row-start: 5;
+        }
+
+        .div33 {
+            grid-row: span 2 / span 2;
+            grid-column-start: 10;
+            grid-row-start: 5;
+        }
+        
+     </style>
+</head>
+<body>
+    
+<div class="parent">
+    <div class="div1">ㅤ</div>
+    <div class="div2">ㅤ</div>
+    <div class="div3">ㅤ</div>
+    <div class="div4">ㅤ</div>
+    <div class="div5">ㅤ</div>
+    <div class="div6">ㅤ</div>
+    <div class="div7">ㅤ</div>
+    <div class="div8">ㅤ</div>
+    <div class="div9">ㅤ</div>
+    <div class="div10">ㅤ</div>
+    <div class="div11">ㅤ</div>
+    <div class="div17">ㅤ</div>
+    <div class="div18">ㅤ</div>
+    <div class="div19">ㅤ</div>
+    <div class="div20">ㅤ</div>
+    <div class="div21">ㅤ</div>
+    <div class="div22">ㅤ</div>
+    <div class="div23">ㅤ</div>
+    <div class="div24">ㅤ</div>
+    <div class="div25">ㅤ</div>
+    <div class="div26">ㅤ</div>
+    <div class="div27">ㅤ</div>
+    <div class="div28">ㅤ</div>
+    <div class="div29">ㅤ</div>
+    <div class="div30">ㅤ</div>
+    <div class="div31">ㅤ</div>
+    <div class="div32">ㅤ</div>
+    <div class="div33">ㅤ</div>
+</div>
+    
+      
+</body>
+</html>
\ No newline at end of file
