From 605ca4941839f9dd3b19de135b9c7b71248014eb Mon Sep 17 00:00:00 2001
From: maheenandcode <m3malik@uwaterloo.ca>
Date: Wed, 6 Sep 2023 20:24:22 -0400
Subject: [PATCH] Centring items in the last row of the grids

---
 people.css | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/people.css b/people.css
index ae96e36..0c0ea09 100644
--- a/people.css
+++ b/people.css
@@ -224,13 +224,39 @@
 
     display: grid;
 
-    grid-template-columns: 1fr 1fr 1fr;
+/* Creating a 6-column grid with equal fractional widths */
+
+    grid-template-columns: repeat(6, 1fr);
     grid-template-rows: auto;
     grid-gap: 10px;
     padding: 10px;
 
 }
 
+/* Targeting all items within the .band container */
+.band > div {
+
+/* Spanning each item across 2 grid columns */
+  grid-column: span 2;
+}
+
+/* Dealing with  3n + 2 case where n is the number of rows */
+
+.item-17:last-child:nth-child(3n - 1) {
+  grid-column-end: -2;
+}
+
+.item-16:nth-last-child(2):nth-child(3n + 1) {
+  grid-column-end: 4;
+}
+
+/* Dealing with 3n + 1th item where n is the number of rows */
+
+.item-46:last-child:nth-child(3n - 2) {
+  grid-column-end: 5;
+}
+
+
 /*formatting for each individual entry*/
 .card 
 {
@@ -246,6 +272,7 @@
     transition: all .1s ease-in;
 }
 
+
 /*Drop shadow and animation on hover*/
 .card:hover 
 {