{
  "generatedFrom": "grid.contract.json",
  "component": "Grid",
  "slug": "grid",
  "group": "Layout",
  "tier": "leaf-lit",
  "summary": "A CSS-grid container — a fixed column count or a responsive auto-fit, with the DS gutter scale, track justify/align, and a responsive collapse.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/aha-grid';",
    "element": "aha-grid",
    "registers": "aha-grid"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/grid/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/grid/grid.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/grid.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/grid.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-grid> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-grid"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-grid"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-grid",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "columns",
      "type": "number",
      "default": "—",
      "desc": "Fixed number of equal-width columns (minmax(0, 1fr) tracks)"
    },
    {
      "name": "min",
      "type": "number",
      "default": "—",
      "desc": "Minimum track width for a responsive auto-fit grid; wins over columns"
    },
    {
      "name": "gap",
      "type": "none | small | middle | large | number | \"h v\"",
      "default": "0",
      "desc": "Gutter between cells — a named DS step (8/16/24) / raw px, or two values \"h v\" for a separate horizontal/vertical gutter"
    },
    {
      "name": "gutter",
      "type": "same as gap",
      "default": "—",
      "desc": "Alias of gap (AntD Row vocabulary); gap wins if both are set"
    },
    {
      "name": "justify",
      "type": "start | center | end | space-between | space-around | space-evenly",
      "default": "—",
      "desc": "Horizontal distribution of the tracks (justify-content)"
    },
    {
      "name": "align",
      "type": "start | center | end | stretch",
      "default": "—",
      "desc": "Vertical alignment of the cells within their row (align-items)"
    },
    {
      "name": "responsive",
      "type": "boolean",
      "default": "false",
      "desc": "With columns=N, lets tracks collapse to fewer as the container narrows — no media queries"
    }
  ],
  "tokens": [
    "text-default"
  ],
  "spec": [
    {
      "label": "Display",
      "value": "grid"
    },
    {
      "label": "Columns",
      "value": "columns=N → repeat(N, minmax(0, 1fr))"
    },
    {
      "label": "Auto-fit",
      "value": "min=W → repeat(auto-fit, minmax(W, 1fr))"
    },
    {
      "label": "Responsive collapse",
      "value": "columns=N + responsive → tracks reflow to fewer as the container narrows"
    },
    {
      "label": "Gutter scale",
      "value": "none 0 · small 8 · middle 16 · large 24 (or a raw px number)"
    },
    {
      "label": "Gutter [h,v]",
      "value": "gap=\"h v\" → separate column-gap / row-gap"
    },
    {
      "label": "Justify",
      "value": "start · center · end · space-between · space-around · space-evenly (justify-content)"
    },
    {
      "label": "Align",
      "value": "start · center · end · stretch (align-items)"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Grid",
        "when": "a two-dimensional layout — a card gallery, a stat row, an image grid"
      },
      {
        "what": "Flex",
        "when": "a one-dimensional flow where items size to content"
      },
      {
        "what": "min (auto-fit)",
        "when": "the column count should follow the container width — prefer it over media queries"
      }
    ],
    "note": "Reach for `min` (auto-fit) or `responsive` before hand-writing breakpoints — the grid reflows itself. Use `gap=\"h v\"` when rows need tighter spacing than columns. Keep gutters on the named scale so spacing matches the rest of the surface. Grid is layout, never decoration: it paints no background.",
    "dsv3": "COVERED — DS V3 ships no measured Grid/Row-Col component set (the Figma \"Grid\" hits are icon glyphs, not a layout primitive), so the matrix is derived from the AntD 24-col Row/Col reference over a CSS grid + the DS spacing scale: fixed `columns` tracks, `min` auto-fit, a `responsive` collapse (columns fold as the container narrows), a `gutter` that takes one value or `[h,v]` (column-gap / row-gap), and `justify`/`align` of the tracks. A deliberate, documented layout extension; the only visual token it binds is inherited text colour. No interactive state → no motion (correctly gated as a container)."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-grid> is the SAME shared custom element React and Vue consume — here in its\n     native form. Theming comes only from the --aha-* tokens in tokens.css. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-grid.js';   // registers <aha-grid>\n</script>\n\n<!-- fixed three-column grid; gutter [h,v] → 16 horizontal / 8 vertical, on the DS scale -->\n<aha-grid columns=\"3\" gap=\"middle small\">\n  <div>Card A</div>\n  <div>Card B</div>\n  <div>Card C</div>\n  <div>Card D</div>\n  <div>Card E</div>\n  <div>Card F</div>\n</aha-grid>\n\n<!-- fixed columns that reflow to fewer on narrow widths (no media queries) -->\n<aha-grid columns=\"4\" responsive gap=\"middle\" style=\"margin-top:24px\">\n  <div>Reflow A</div>\n  <div>Reflow B</div>\n  <div>Reflow C</div>\n  <div>Reflow D</div>\n</aha-grid>\n\n<!-- responsive auto-fit: tracks are at least 220px wide, the count follows the container -->\n<aha-grid min=\"220\" gap=\"large\" justify=\"center\" style=\"margin-top:24px\">\n  <div>Auto A</div>\n  <div>Auto B</div>\n  <div>Auto C</div>\n</aha-grid>\n",
    "react": "import '@ahaslides-product/design/aha-grid';   // registers <aha-grid>\n\n// A static layout primitive — the custom element renders identically in React, no wrapper needed.\n// gutter [h,v] via `gap=\"middle small\"`, plus justify/align of the tracks.\n<aha-grid columns=\"3\" gap=\"middle small\" align=\"center\">\n  {cards.map((c) => <Card key={c.id} {...c} />)}\n</aha-grid>\n\n// Fixed columns that collapse to fewer on narrow widths — `responsive`, no media queries.\n<aha-grid columns=\"4\" responsive gap=\"middle\">\n  {tiles.map((t) => <Tile key={t.id} {...t} />)}\n</aha-grid>\n\n// Responsive auto-fit: the column count follows the container width.\n<aha-grid min=\"220\" gap=\"large\">\n  {items.map((i) => <Tile key={i.id} {...i} />)}\n</aha-grid>\n",
    "vue": "// main.ts — register the element + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-grid';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <!-- gutter [h,v] via gap=\"middle small\", plus justify/align of the tracks -->\n  <aha-grid columns=\"3\" gap=\"middle small\" align=\"center\">\n    <Card v-for=\"c in cards\" :key=\"c.id\" v-bind=\"c\" />\n  </aha-grid>\n\n  <!-- Fixed columns that collapse to fewer on narrow widths — responsive, no media queries -->\n  <aha-grid columns=\"4\" responsive gap=\"middle\">\n    <Tile v-for=\"t in tiles\" :key=\"t.id\" v-bind=\"t\" />\n  </aha-grid>\n\n  <!-- Responsive auto-fit: the column count follows the container width -->\n  <aha-grid min=\"220\" gap=\"large\">\n    <Tile v-for=\"i in items\" :key=\"i.id\" v-bind=\"i\" />\n  </aha-grid>\n</template>\n"
  }
}