adding grid area part

MDASHRAFUDDINTANVIR1 · Mar 4, 2024 · 66ce6a8 · 66ce6a8
1 parent 653f0d8
commit 66ce6a8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/grid.css b/grid.css
@@ -24,4 +24,45 @@
     border-radius: 5px;
     color: white;
     background-color: darkblue;
+}
+
+.grid-area {
+    background-color: antiquewhite;
+    padding: 30px;
+    display: grid;
+    row-gap: 20px;
+    column-gap: 15px;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: 
+    "header-part header-part header-part"
+    "main-part main-part sidebar-portion"
+    "footer-part footer-part footer-part"
+    ;
+
+}
+.header-part {
+    background-color: lightcoral;
+    padding: 20px;
+    border-radius: 5px;
+    grid-area: header-part;
+
+}
+.main-part{
+    background-color: lightblue;
+    padding: 20px;
+    border-radius: 5px;
+    grid-area: main-part;
+}
+.sidebar-portion {
+    background-color: lightgreen;
+    padding: 20px;
+    border-radius: 5px;
+    grid-area: sidebar-portion;
+}
+.footer-part {
+    background-color: lightseagreen;
+    padding: 20px;
+    border-radius: 5px;
+    grid-area: footer-part;
 }
diff --git a/index.html b/index.html
@@ -164,6 +164,19 @@ <h4>Product4</h4>
         </div>
     </section>
 
+    <section class="grid-area">
+        <div class="header-part"><h4>Header Part</h4></div>
+        <div class="main-part">
+            <h4>Main Portion</h4>
+        </div>
+        <div class="sidebar-portion">
+            <h4>Sidebar</h4>
+        </div>
+        <div class="footer-part">
+            <h4>Footer Part</h4>
+        </div>
+    </section>
+