Style updates

src/render/html/component/method.tsx

@@ -9,25 +9,36 @@ interface MethodSectionProps {
 
 export function MethodSection({ method, playbill }: MethodSectionProps) {
   const ranks = method.abilities.map((rank, i) => {
-    return <div className="method-rank" key={i}>
-      <h3>Rank {i + 1}</h3>
-      <div className="method-rank-content">
-        {rank.map((abilityId) => {
-          const ability = playbill.abilities[abilityId];
-          return <AbilityCard ability={ability} key={abilityId} />;
-        })
-        }
+    const gridTemplateColumns = new Array(Math.min(rank.length, 3))
+      .fill("1fr")
+      .join(" ");
+    return (
+      <div className="method-rank" key={i}>
+        <h3>Rank {i + 1}</h3>
+        <div className="method-rank-content" style={{ gridTemplateColumns }}>
+          {rank.map((abilityId) => {
+            const ability = playbill.abilities[abilityId];
+            return <AbilityCard ability={ability} key={abilityId} />;
+          })}
+        </div>
       </div>
-    </div>
+    );
   });
 
-  return <Section
-    type="method"
-    componentId={method.id}
-    title={method.name}
-    preInfo={<p className="method-curator">{method.curator}'s Method of</p>}
-    info={<p className="method-description" dangerouslySetInnerHTML={{ __html: method.description }}></p>}
-  >
-    <div className="method-ranks">{ranks}</div>
-  </Section>
+  return (
+    <Section
+      type="method"
+      componentId={method.id}
+      title={method.name}
+      preInfo={<p className="method-curator">{method.curator}'s Method of</p>}
+      info={
+        <p
+          className="method-description"
+          dangerouslySetInnerHTML={{ __html: method.description }}
+        />
+      }
+    >
+      <div className="method-ranks">{ranks}</div>
+    </Section>
+  );
 }