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.

---
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:

contentSections array | default: array

Content sections to render within this grid item.

gap enum | default: md

The gap between grid items.

Accepted values:
  • none
  • 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.

---
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.

---
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.

---
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.

---
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.

---
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.

---
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.

---
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.

---
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.

---
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.
---