square images only

css/portfolio.css

@@ -1,13 +1,11 @@
 #portfolio-grid {
     display: grid;
-    /*grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));*/
+    grid-template-columns: repeat(3, 1fr);
-    grid-template-columns: repeat(12, 1fr);
-    grid-auto-rows: 106px;
-    /*grid-auto-rows: 210px;*/
     grid-auto-flow: dense;
     gap: 1.5rem;
 
     & > * {
+        aspect-ratio: 1/1;
         overflow: hidden;
         border-radius: var(--border-radius);
         background: var(--surface-container-highest);
@@ -34,32 +32,6 @@
     & > *:hover img {
         transform: scale(1.08);
     }
-
-    & > .portrait {
-        grid-column: span 3;
-        grid-row: span 4;
-    }
-    & > .landscape {
-        grid-column: span 4;
-        grid-row: span 3;
-    }
-    & > .large {
-        grid-row: span 2;
-        grid-column: span 2;
-    }
-
-    /*& > :nth-child(7n) {
-        grid-column: span 2;
-        grid-row: span 2;
-    }
-
-    & > :nth-child(11n+5) {
-        grid-column: span 2;
-    }
-
-    & > :nth-child(13n+9) {
-        grid-row: span 2;
-    }*/
 }
 
 #lightbox {

html/portfolio.templ

@@ -1,18 +1,4 @@
 package html
-import "strings"
-func stripSize(path string) string {
-	if strings.Contains(path, "landscape") {
-		return "landscape"
-	}
-	if strings.Contains(path, "portrait") {
-		return "portrait"
-	}
-	if strings.Contains(path, "large") {
-		return "large"
-	}
-	return ""
-	}
-
 templ Portfolio(images []string, activePage string, pages []string) {
 	@layout("portfolio") {
 		<main>
@@ -20,7 +6,7 @@ templ Portfolio(images []string, activePage string, pages []string) {
 			<section>
 				<div id="portfolio-grid">
 					for _, img := range images {
-						<div class={stripSize(img)}>
+						<div>
 							@AvifImage("portfolio/"+img, "portfolio")
 						</div>
 					}