Improve wallet grid layout with dynamic column sizing

Author: AKCodez

about/xrp.page.tsx

@@ -111,7 +111,7 @@ export default function XrpOverview() {
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-
+  const totalCols = Math.max(softwallets.length, hardwallets.length) + 1;
   return (
     <div className="landing">
       <div>
@@ -376,7 +376,7 @@ export default function XrpOverview() {
                     "Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
                   )}
                 </h5>
-                <ul className="nav nav-grid-lg cols-of-6" id="wallets">
+                <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
                   <li className="nav-item nav-grid-head">
                     <h6 className="fs-4-5">{translate("Software Wallets")}</h6>
                   </li>

static/css/devportal2024-v1.css

@@ -150,7 +150,27 @@ a.card:hover h3 {
 .light .circled-logo {
   border: none;
 }
-
+.cols-of-1{
+  grid-template-rows:repeat(1, min-content)
+}
+.cols-of-2{
+  grid-template-rows:repeat(2, min-content)
+} 
+.cols-of-3{
+  grid-template-rows:repeat(3, min-content)
+}
+.cols-of-4{
+  grid-template-rows:repeat(4, min-content)
+}
+.cols-of-5{
+  grid-template-rows:repeat(5, min-content)
+}
+.cols-of-6{
+  grid-template-rows:repeat(6, min-content)
+}
+.cols-of-7{
+  grid-template-rows:repeat(7, min-content)
+}
 .card-deck {
   margin-top: 2.5rem;
   margin-left: (-$card-deck-margin);