---
layout: ~/layouts/MdxDocLayout.astro
title: "Grid"
description: "A responsive grid layout component for organizing content into columns."
sourceFile: "components/grid"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import Heading from "~/components/docs/Heading.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import {
  GridDemo,
  GridVariantsDemo,
  GridAsymmetricDemo,
  GridGapDemo,
  GridMobileDividerDemo,
} from "~/components/demos/GridDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="GridDemo">
    <GridDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>
  <Heading level={2}>Installation</Heading>

```tsx
import { Grid, GridItem } from "@cloudflare/kumo";
```

</ComponentSection>

{/* Grid Variants */}

<ComponentSection>
  <Heading level={2}>Grid Variants</Heading>
  <p>
    The Grid component supports multiple column layouts that adapt responsively
    across breakpoints.
  </p>
  <ComponentExample demo="GridVariantsDemo">
    <GridVariantsDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Asymmetric Layouts */}

<ComponentSection>
  <Heading level={2}>Asymmetric Layouts</Heading>
  <p>Use asymmetric variants for sidebar/main content layouts.</p>
  <ComponentExample demo="GridAsymmetricDemo">
    <GridAsymmetricDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Gap Sizes */}

<ComponentSection>
  <Heading level={2}>Gap Sizes</Heading>
  <p>Control the spacing between grid items with the gap prop.</p>
  <ComponentExample demo="GridGapDemo">
    <GridGapDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Mobile Dividers */}

<ComponentSection>
  <Heading level={2}>Mobile Dividers</Heading>
  <p>
    Add dividers between items on mobile with the mobileDivider prop (only works
    with the 4up variant).
  </p>
  <ComponentExample demo="GridMobileDividerDemo">
    <GridMobileDividerDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* All Variants */}

<ComponentSection>
  <Heading level={2}>All Variants</Heading>
  <p>Reference for all available grid variants:</p>
  <div class="overflow-x-auto">
    <table class="w-full text-left text-sm">
      <thead>
        <tr class="border-b border-kumo-line">
          <th class="py-3 pr-4 font-medium">Variant</th>
          <th class="py-3 pr-4 font-medium">Description</th>
        </tr>
      </thead>
      <tbody class="text-kumo-strong">
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`2up`</td>
          <td class="py-3 pr-4">1 column mobile, 2 columns medium+</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`side-by-side`</td>
          <td class="py-3 pr-4">Always 2 columns</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`2-1`</td>
          <td class="py-3 pr-4">66%/33% split on medium+</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`1-2`</td>
          <td class="py-3 pr-4">33%/66% split on medium+</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`1-3up`</td>
          <td class="py-3 pr-4">1 column mobile, 3 columns large+</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`3up`</td>
          <td class="py-3 pr-4">1 mobile, 2 medium, 3 large</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`4up`</td>
          <td class="py-3 pr-4">Progressive: 1 → 2 → 3 → 4 columns</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`6up`</td>
          <td class="py-3 pr-4">2 mobile, up to 6 on XL</td>
        </tr>
        <tr class="border-b border-kumo-line">
          <td class="py-3 pr-4">`1-2-4up`</td>
          <td class="py-3 pr-4">1 mobile, 2 medium, 4 large</td>
        </tr>
      </tbody>
    </table>
  </div>
</ComponentSection>

{/* API Reference */}

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <Heading level={3}>Grid</Heading>
  <PropsTable component="Grid" />

<Heading level={3}>GridItem</Heading>
<p>
  GridItem is a wrapper component for grid children. It accepts standard div
  props including `className` and `children`.
</p>

</ComponentSection>
