From e33578882fdeda43675c6563b3da42843047f43a Mon Sep 17 00:00:00 2001
From: Brian Luerssen <brian@draftbit.com>
Date: Sat, 4 Jul 2026 23:59:21 -0400
Subject: [PATCH] Lay out the nine stylers as a 3x3 grid on desktop

The flex-wrap layout left the ninth styler alone on a third row (4/4/1).
CSS grid gives three balanced rows; mobile keeps the 2-up flex flow.
Container gets width:100% so the card holds its 780px max-width now
that grid columns no longer stretch it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/AvatarGenerator.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AvatarGenerator.css b/src/components/AvatarGenerator.css
index b5775e9..f365368 100644
--- a/src/components/AvatarGenerator.css
+++ b/src/components/AvatarGenerator.css
@@ -1,5 +1,6 @@
 .AvatarGenerator-container {
   position: relative;
+  width: 100%;
   max-width: 780px;
   box-shadow: 0 4px 6px 0 rgba(24, 33, 45, 0.06);
   background-color: #ffffff;
@@ -79,11 +80,10 @@
     padding-left: 48px;
     padding-right: 48px;
     width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
+    align-items: start;
     margin-bottom: 48px;
   }
 }