Better layout using flexbox instead of grid.

Author: daveverwer

FrontEnd/styles/supporters.scss

@@ -23,28 +23,23 @@
 
     section {
         ul {
-            display: grid;
-            gap: 20px;
-            row-gap: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 30px 70px;
+            justify-content: center;
             margin: 60px 0;
             padding: 0;
 
             li {
-                display: flex;
                 list-style: none;
 
                 > a {
                     display: flex;
                     align-items: center;
                 }
 
-                &:last-child:nth-child(odd) {
-                    grid-column: span 2;
-                    justify-self: center;
-                }
-
                 @media screen and (max-width: $mobile-breakpoint) {
-                    justify-content: center;
+                    width: 100%;
                 }
             }
         }
@@ -60,32 +55,13 @@
             }
         }
 
-        &.corporate,
-        &.infrastructure {
-            ul {
-                grid-template-columns: 1fr 1fr;
-
-                li {
-                    justify-content: center;
-                }
-
-                &.solo {
-                    grid-template-columns: 1fr;
-                }
-            }
-
-            @media screen and (max-width: $mobile-breakpoint) {
-                ul {
-                    grid-template-columns: 1fr;
-                }
-            }
-        }
-
         &.community {
             ul {
-                grid-template-columns: 1fr 1fr 1fr;
+                justify-content: flex-start;
+
+                > li {
+                    width: calc(100% / 3 - 70px);
 
-                li {
                     a:not(:hover) {
                         color: var(--page-text);
                     }
@@ -103,6 +79,8 @@
                     }
 
                     @media screen and (max-width: $mobile-breakpoint) {
+                        width: 50%;
+
                         img {
                             margin: 0;
                         }
@@ -120,12 +98,6 @@
                     }
                 }
             }
-
-            @media screen and (max-width: $mobile-breakpoint) {
-                ul {
-                    grid-template-columns: 1fr 1fr;
-                }
-            }
         }
     }
 

Sources/App/Views/Supporters/SupportersShow+Model.swift

@@ -53,7 +53,6 @@ enum SupportersShow {
                 .class("corporate"),
                 .h3("Corporate Supporters"),
                 .ul(
-                    .class("solo"),
                     Supporters.primary.listNode
                 ),
                 .ul(