Layout · 1 Props

Grid

CSS grid layout container with configurable column count and gap. Collapses to fewer columns on smaller viewports.

Layout 1 Props

src/components/blocks/Grid.astro

Props

Prop	Type	Default	Beschreibung
class	string	—

Beispiele

Column Count

2 and 3 column grids with gap.

2 Columns:

Col 1

Col 2

3 Columns:

Col 1

Col 2

Col 3

[
  {
    "type": "text",
    "props": {
      "size": "sm",
      "tone": "muted",
      "text": "2 Columns:"
    }
  },
  {
    "type": "grid",
    "props": {
      "cols": 2,
      "gap": "md"
    },
    "blocks": [
      {
        "type": "card",
        "props": {
          "variant": "soft",
          "tone": "primary",
          "padding": "sm"
        },
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Col 1"
            }
          }
        ]
      },
      {
        "type": "card",
        "props": {
          "variant": "soft",
          "tone": "primary",
          "padding": "sm"
        },
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Col 2"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "text",
    "props": {
      "size": "sm",
      "tone": "muted",
      "text": "3 Columns:"
    }
  },
  {
    "type": "grid",
    "props": {
      "cols": 3,
      "gap": "md"
    },
    "blocks": [
      {
        "type": "card",
        "props": {
          "variant": "soft",
          "tone": "accent",
          "padding": "sm"
        },
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Col 1"
            }
          }
        ]
      },
      {
        "type": "card",
        "props": {
          "variant": "soft",
          "tone": "accent",
          "padding": "sm"
        },
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Col 2"
            }
          }
        ]
      },
      {
        "type": "card",
        "props": {
          "variant": "soft",
          "tone": "accent",
          "padding": "sm"
        },
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Col 3"
            }
          }
        ]
      }
    ]
  }
]

<Text size="sm" tone="muted" text="2 Columns:" />
<Grid cols={2} gap="md">
  <Card variant="soft" tone="primary" padding="sm">
    <Text text="Col 1" />
  </Card>
  <Card variant="soft" tone="primary" padding="sm">
    <Text text="Col 2" />
  </Card>
</Grid>
<Text size="sm" tone="muted" text="3 Columns:" />
<Grid cols={3} gap="md">
  <Card variant="soft" tone="accent" padding="sm">
    <Text text="Col 1" />
  </Card>
  <Card variant="soft" tone="accent" padding="sm">
    <Text text="Col 2" />
  </Card>
  <Card variant="soft" tone="accent" padding="sm">
    <Text text="Col 3" />
  </Card>
</Grid>