style(storybook): refine data display story layout

src/components/avatar.stories.tsx

@@ -76,20 +76,44 @@ const meta = { title: "Components/Data & Display/Avatar", component: Avatar, par
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
-)
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
+// (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so every subtitle and divider
+// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
+const specimenColumns = {
+  2: "min-[1000px]:grid-cols-2",
+  3: "min-[1000px]:grid-cols-3",
+  4: "min-[1000px]:grid-cols-4",
+} as const
+
+function SpecimenGrid({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
+      {ids.map((id) => {
+        const s = sections.find((section) => section.id === id)!
+        return (
+          <div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
+            <StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 // Representative Story: the common Story page; the sections group the same specimens.
+// Representative Story: Overview / States are merged into Variants (Image, Fallback); Composition stays under Usage. 3 columns on PC.
 export const All: Story = {
   name: "Avatar",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Avatar" />
-      <StorySection title="Overview">{board("image")}</StorySection>
-      <StorySection title="States">{board("fallback")}</StorySection>
-      <StorySection title="Usage">{board("composition")}</StorySection>
+      <StorySection title="Variants">
+        <SpecimenGrid ids={["image", "fallback"]} columns={3} />
+      </StorySection>
+      <StorySection title="Usage">
+        <SpecimenGrid ids={["composition"]} columns={3} />
+      </StorySection>
     </StoryPage>
   ),
 }