playing with grid

MDASHRAFUDDINTANVIR1 · Mar 5, 2024 · 642d69e · 642d69e
1 parent 66ce6a8
commit 642d69e
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/grid.css b/grid.css
@@ -65,4 +65,95 @@
     padding: 20px;
     border-radius: 5px;
     grid-area: footer-part;
+}
+
+.grid-practice {
+    margin: 30px 0;
+    background-color: lightyellow;
+    padding: 30px;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+}
+
+.square {
+    background-color: rgb(219, 19, 19);
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    color: white;
+}
+
+.square:hover {
+    background-color: rgb(240, 158, 158);
+    color: rgb(2, 2, 41);
+    transition: all 0.5s;
+}
+
+.square:nth-child(1){
+    grid-row: 1;
+    grid-column: 1;
+}
+.square:nth-child(2){
+    grid-row: 1;
+    grid-column: 2;
+}
+.square:nth-child(3){
+    grid-row: 1;
+    grid-column: 3;
+}
+.square:nth-child(4){
+    grid-row: 1;
+    grid-column: 4;
+}
+.square:nth-child(5){
+    grid-row: 1;
+    grid-column: 5;
+}
+.square:nth-child(6){
+    grid-row: 2;
+    grid-column: 5;
+}
+.square:nth-child(7){
+    grid-row: 3;
+    grid-column: 5;
+}
+.square:nth-child(8){
+    grid-row: 4;
+    grid-column: 5;
+}
+.square:nth-child(9){
+    grid-row: 5;
+    grid-column: 5;
+}
+.square:nth-child(10){
+    grid-row: 5;
+    grid-column: 4;
+}
+.square:nth-child(11){
+    grid-row: 5;
+    grid-column: 3;
+}
+.square:nth-child(12){
+    grid-row: 5;
+    grid-column: 2;
+}
+.square:nth-child(13){
+    grid-row: 5;
+    grid-column: 1;
+}
+.square:nth-child(14){
+    grid-row: 4;
+    grid-column: 1;
+}
+.square:nth-child(15){
+    grid-row: 3;
+    grid-column: 1;
+}
+.square:nth-child(16){
+    grid-row: 2;
+    grid-column: 1;
 }
diff --git a/index.html b/index.html
@@ -177,6 +177,25 @@ <h4>Footer Part</h4>
         </div>
     </section>
 
+    <section class="grid-practice">
+        <div class="square">1</div>
+        <div class="square">2</div>
+        <div class="square">3</div>
+        <div class="square">4</div>
+        <div class="square">5</div>
+        <div class="square">6</div>
+        <div class="square">7</div>
+        <div class="square">8</div>
+        <div class="square">9</div>
+        <div class="square">10</div>
+        <div class="square">11</div>
+        <div class="square">12</div>
+        <div class="square">13</div>
+        <div class="square">14</div>
+        <div class="square">15</div>
+        <div class="square">16</div>
+    </section>
+