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
Optional label for the grid to help identify it in the editor.
layout enum | default: center
Defines how grid items are arranged.
Accepted values:
-
start -
center
minItemWidth number | default: 280
The minimum width for each grid item in pixels.
maxItemWidth number | default: 400
The maximum width for each grid item in pixels.
items array | default: array
Array of grid items, each containing content blocks to render.
Item Properties:
_component string | default: building-blocks/wrappers/grid/grid-item
contentSections array | default: array
Content sections to render within this grid item.
gap enum | default: md
The gap between grid items.
Accepted values:
-
xs -
sm -
md -
lg -
xl -
2xl -
3xl
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.
---