{
  "name": "Grid",
  "category": "Layout",
  "subcategory": null,
  "description": "CSS grid wrapper with columns + gap as props.",
  "thumbnail": "/preview-cards/grid.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Grid/Grid.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Grid",
    "category": "Layout",
    "subcategory": null,
    "description": "CSS grid wrapper with columns + gap as props.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Grid/Grid.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Columns",
        "type": "int",
        "default": "1",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Gap",
        "type": "string?",
        "default": "\"4\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "RowGap",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ColGap",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Basic 3-Column",
        "code": "<Grid Columns=\"3\" Gap=\"4\">\n    <div>1</div>\n    <div>2</div>\n    <div>3</div>\n    <div>4</div>\n    <div>5</div>\n    <div>6</div>\n</Grid>"
      },
      {
        "title": "Responsive Columns",
        "code": "<Grid Columns=\"2\" Gap=\"4\" Class=\"md:grid-cols-4\">\n    <div>1</div>\n    <div>2</div>\n    <!-- ... -->\n</Grid>"
      },
      {
        "title": "Different Gaps",
        "code": "<Grid Columns=\"3\" RowGap=\"6\" ColGap=\"2\">\n    <div>1</div>\n    <div>2</div>\n    <!-- ... -->\n</Grid>"
      },
      {
        "title": "Columns — interactive",
        "code": "<Grid Columns=\"4\" Gap=\"3\">\n    @for (var i = 1; i <= 12; i++)\n    {\n        <div>@i</div>\n    }\n</Grid>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "grid",
  "docsUrl": "https://lumeo.nativ.sh/components/grid",
  "sourceUrl": [
    {
      "file": "UI/Grid/Grid.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Grid/Grid.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Grid/Grid.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</div>\n\n@code {\n    [Parameter] public int Columns { get; set; } = 1;\n    [Parameter] public string? Gap { get; set; } = \"4\";\n    [Parameter] public string? RowGap { get; set; }\n    [Parameter] public string? ColGap { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass\n    {\n        get\n        {\n            var gap = !string.IsNullOrEmpty(Gap) ? $\"gap-{Gap}\" : \"\";\n            var rowGap = !string.IsNullOrEmpty(RowGap) ? $\"gap-y-{RowGap}\" : \"\";\n            var colGap = !string.IsNullOrEmpty(ColGap) ? $\"gap-x-{ColGap}\" : \"\";\n            return $\"grid grid-cols-{Columns} {gap} {rowGap} {colGap} {Class}\".Trim();\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Grid",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Chart/ChartSkeletonTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridExpandableTests.cs",
    "tests/Lumeo.Tests/Components/DataGrid/DataGridFilterExtensibilityTests.cs",
    "tests/Lumeo.Tests/Components/FileManager/FileManagerTests.cs",
    "tests/Lumeo.Tests/Components/Grid/GridTests.cs"
  ],
  "mdSummary": "# Grid\n\nCSS grid wrapper with columns + gap as props.\n\n**Package:** `Lumeo` · **Category:** Layout\n**Docs:** https://lumeo.nativ.sh/components/grid\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Grid | Columns | `int` | `1` |  |\n| Grid | Gap | `string?` | `\"4\"` |  |\n| Grid | RowGap | `string?` | `` |  |\n| Grid | ColGap | `string?` | `` |  |\n| Grid | ChildContent | `RenderFragment?` | `` |  |\n| Grid | Class | `string?` | `` |  |\n| Grid | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Grid) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Grid />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Grid/Grid.razor`\n"
}