Back to site

Grid

Arranges content into a grid that adapts to screen size.

Grid Item 1

This is the first grid item with a heading and simple text. The grid component centers items and provides flexible width options.

Grid Item 2

This is the second grid item. Items can have equal or unequal widths.

Grid Item 3

This is the third grid item. The layout is responsive and adapts to different screen sizes.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="md" label="" layout="start" maxItemWidth={400} minItemWidth={250}>
  <GridItem>
    <Heading level="h3">
      Grid Item 1
    </Heading>
    <Text>
      <p>This is the first grid item with a heading and simple text. The grid component centers items and provides flexible width options.</p>
    </Text>
  </GridItem>
  <GridItem>
    <Heading level="h3">
      Grid Item 2
    </Heading>
    <Text>
      <p>This is the second grid item. Items can have equal or unequal widths.</p>
    </Text>
  </GridItem>
  <GridItem>
    <Heading level="h3">
      Grid Item 3
    </Heading>
    <Text>
      <p>This is the third grid item. The layout is responsive and adapts to different screen sizes.</p>
    </Text>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  minItemWidth: 250
  layout: start
  items:
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Grid Item 1
          level: h3
        - _component: building-blocks/core-elements/text
          text: This is the first grid item with a heading and simple text. The grid component centers items and provides flexible width options.
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Grid Item 2
          level: h3
        - _component: building-blocks/core-elements/text
          text: This is the second grid item. Items can have equal or unequal widths.
    - contentSections:
        - _component: building-blocks/core-elements/heading
          text: Grid Item 3
          level: h3
        - _component: building-blocks/core-elements/text
          text: This is the third grid item. The layout is responsive and adapts to different screen sizes.
  label: ''
  maxItemWidth: 400
  gap: md
---

Overview

A responsive grid layout for displaying multiple items in rows and columns. Supports adjustable spacing, layouts, and width bounds.

Properties

label string

layout string | default: center

minItemWidth string | default: 280

maxItemWidth string | default: 400

items string | default: array

gap string | default: md

Slots

default

The contents for the the Grid. Used only when the items property is not set.

Child Component:
<GridItem>
Properties (documented under the items property above):
  • contentSections/slot

Examples

Layouts

Item 1

The start-aligned layout uses CSS Grid to pack as many items as possible per row while respecting minimum width constraints.

Item 2

Perfect for image galleries, portfolio items, or any content where you want to maximize space utilization.

Item 3

Items stretch to fill their grid cells and align to the start horizontally for a clean, organized appearance.

Item 4

Each item maintains consistent sizing within the min width constraints while maximizing items per row.

Item 5

It's great for showcasing multiple items like products, blog posts, team members, or portfolio pieces in a grid format.

Item 6

It adapts to different screen sizes while maintaining alignment between grid items.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid layout="start" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>The start-aligned layout uses CSS Grid to pack as many items as possible per row while respecting minimum width constraints.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Perfect for image galleries, portfolio items, or any content where you want to maximize space utilization.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Items stretch to fill their grid cells and align to the start horizontally for a clean, organized appearance.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 4
      </Heading>
      <Text>
        <p>Each item maintains consistent sizing within the min width constraints while maximizing items per row.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 5
      </Heading>
      <Text>
        <p>It's great for showcasing multiple items like products, blog posts, team members, or portfolio pieces in a grid format.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 6
      </Heading>
      <Text>
        <p>It adapts to different screen sizes while maintaining alignment between grid items.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: start
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: The start-aligned layout uses CSS Grid to pack as many items as possible per row while respecting minimum width constraints.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Perfect for image galleries, portfolio items, or any content where you want to maximize space utilization.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Items stretch to fill their grid cells and align to the start horizontally for a clean, organized appearance.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 4
              level: h3
            - _component: building-blocks/core-elements/text
              text: Each item maintains consistent sizing within the min width constraints while maximizing items per row.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 5
              level: h3
            - _component: building-blocks/core-elements/text
              text: It's great for showcasing multiple items like products, blog posts, team members, or portfolio pieces in a grid format.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 6
              level: h3
            - _component: building-blocks/core-elements/text
              text: It adapts to different screen sizes while maintaining alignment between grid items.
---

Feature One

The center-aligned layout sizes items within the min/max width provided.

Feature Two

Items are centered if there is extra whitespace.

Feature Three

You can ensure all items are always equal in a center-aligned layout by giving it the same value for min and max width.

Feature Four

You can make it more flexible by using different min/max widths, but keep in mind the last row might be larger if there's an uneven number of items.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid layout="center" maxItemWidth={350} minItemWidth={350}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Feature One
      </Heading>
      <Text>
        <p>The center-aligned layout sizes items within the min/max width provided.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Feature Two
      </Heading>
      <Text>
        <p>Items are centered if there is extra whitespace.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Feature Three
      </Heading>
      <Text>
        <p>You can ensure all items are always equal in a center-aligned layout by giving it the same value for min and max width.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Feature Four
      </Heading>
      <Text>
        <p>You can make it more flexible by using different min/max widths, but keep in mind the last row might be larger if there's an uneven number of items.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  minItemWidth: 350
  maxItemWidth: 350
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Feature One
              level: h3
            - _component: building-blocks/core-elements/text
              text: The center-aligned layout sizes items within the min/max width provided.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Feature Two
              level: h3
            - _component: building-blocks/core-elements/text
              text: Items are centered if there is extra whitespace.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Feature Three
              level: h3
            - _component: building-blocks/core-elements/text
              text: You can ensure all items are always equal in a center-aligned layout by giving it the same value for min and max width.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Feature Four
              level: h3
            - _component: building-blocks/core-elements/text
              text: You can make it more flexible by using different min/max widths, but keep in mind the last row might be larger if there's an uneven number of items.
---

Spacing

Item 1

Extra small spacing creates tight, compact layouts.

Item 2

Perfect for dense information displays.

Item 3

Minimal gaps between grid items.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="xs" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>Extra small spacing creates tight, compact layouts.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Perfect for dense information displays.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Minimal gaps between grid items.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: xs
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: Extra small spacing creates tight, compact layouts.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Perfect for dense information displays.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Minimal gaps between grid items.
---

Item 1

Small spacing provides subtle separation.

Item 2

Good for related content groups.

Item 3

Maintains visual connection between items.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="sm" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>Small spacing provides subtle separation.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Good for related content groups.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Maintains visual connection between items.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: sm
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: Small spacing provides subtle separation.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Good for related content groups.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Maintains visual connection between items.
---

Item 1

Medium spacing is the default option.

Item 2

Provides balanced visual breathing room.

Item 3

Works well for most content layouts.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="md" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>Medium spacing is the default option.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Provides balanced visual breathing room.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Works well for most content layouts.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: md
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: Medium spacing is the default option.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Provides balanced visual breathing room.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Works well for most content layouts.
---

Item 1

Large spacing creates more visual separation.

Item 2

Good for emphasizing individual items.

Item 3

Helps create a more spacious, airy feel.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="lg" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>Large spacing creates more visual separation.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Good for emphasizing individual items.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Helps create a more spacious, airy feel.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: lg
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: Large spacing creates more visual separation.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Good for emphasizing individual items.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Helps create a more spacious, airy feel.
---

Item 1

Extra large spacing creates significant separation.

Item 2

Perfect for highlighting important content.

Item 3

Creates a premium, spacious layout feel.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="xl" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>Extra large spacing creates significant separation.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Perfect for highlighting important content.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Creates a premium, spacious layout feel.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: xl
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: Extra large spacing creates significant separation.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Perfect for highlighting important content.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Creates a premium, spacious layout feel.
---

Item 1

2xl spacing creates maximum visual separation.

Item 2

Ideal for showcasing premium content.

Item 3

Creates dramatic, impactful layouts.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="2xl" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>2xl spacing creates maximum visual separation.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Ideal for showcasing premium content.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Creates dramatic, impactful layouts.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: 2xl
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: 2xl spacing creates maximum visual separation.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Ideal for showcasing premium content.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Creates dramatic, impactful layouts.
---

Item 1

3xl spacing creates extreme visual separation.

Item 2

Perfect for minimalist, luxury designs.

Item 3

Creates maximum focus on individual items.

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
import Grid from "@wrappers/grid/Grid.astro";
import GridItem from "@wrappers/grid/GridItem.astro";
---

<Grid gap="3xl" layout="center" maxItemWidth={300} minItemWidth={200}>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 1
      </Heading>
      <Text>
        <p>3xl spacing creates extreme visual separation.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 2
      </Heading>
      <Text>
        <p>Perfect for minimalist, luxury designs.</p>
      </Text>
    </Card>
  </GridItem>
  <GridItem>
    <Card border paddingHorizontal="md" paddingVertical="md" rounded>
      <Heading level="h3">
        Item 3
      </Heading>
      <Text>
        <p>Creates maximum focus on individual items.</p>
      </Text>
    </Card>
  </GridItem>
</Grid>
---
blocks:
  _component: building-blocks/wrappers/grid
  layout: center
  gap: 3xl
  minItemWidth: 200
  maxItemWidth: 300
  items:
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 1
              level: h3
            - _component: building-blocks/core-elements/text
              text: 3xl spacing creates extreme visual separation.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 2
              level: h3
            - _component: building-blocks/core-elements/text
              text: Perfect for minimalist, luxury designs.
    - contentSections:
        - _component: building-blocks/wrappers/card
          paddingHorizontal: md
          paddingVertical: md
          rounded: true
          border: true
          contentSections:
            - _component: building-blocks/core-elements/heading
              text: Item 3
              level: h3
            - _component: building-blocks/core-elements/text
              text: Creates maximum focus on individual items.
---