Grid

Responsive, centered grid with configurable sizing.

Grid Item 1

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

Grid Item 2

This is the second grid item. Items are automatically centered and can have equal or intrinsic widths.

Grid Item 3

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

_bookshop_name: wrappers/grid
minItemWidth: 250
maxItemWidth: 320
equalWidth: true
items:
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Grid Item 1
        level: h3
      - _bookshop_name: primitives/paragraph
        text: This is the first grid item with a heading and paragraph. The grid component centers items and provides flexible width options.
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Grid Item 2
        level: h3
      - _bookshop_name: primitives/paragraph
        text: This is the second grid item. Items are automatically centered and can have equal or intrinsic widths.
  - contentBlocks:
      - _bookshop_name: primitives/heading
        text: Grid Item 3
        level: h3
      - _bookshop_name: primitives/paragraph
        text: This is the third grid item. The layout is responsive and adapts to different screen sizes.

Properties

minItemWidth number | default: 200

The minimum width for each grid item in pixels.

maxItemWidth number | default: 320

The maximum width for each grid item in pixels.

verticalAlignment enum | default: start

The vertical alignment of grid items.

Accepted values:

start
center
end
stretch

horizontalAlignment enum | default: center

The horizontal alignment of grid items.

Accepted values:

start
center
end
space-between
space-around
space-evenly

equalWidth boolean | default: true

Whether items should have equal widths (true) or intrinsic widths based on content (false).

items string | default: array

Array of grid items, each containing content blocks to render.

Examples

Width equal

Equal Width

All items have the same width regardless of content length. This creates a uniform, grid-like appearance.

Consistent Layout

Perfect for displaying cards, features, or any content that should have consistent sizing.

Responsive Design

Items automatically wrap and adjust based on available space while maintaining equal widths.

_bookshop_name: wrappers/grid
minItemWidth: 100
maxItemWidth: 300
equalWidth: true
verticalAlignment: stretch
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Equal Width
            level: h3
          - _bookshop_name: primitives/paragraph
            text: All items have the same width regardless of content length. This creates a uniform, grid-like appearance.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Consistent Layout
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Perfect for displaying cards, features, or any content that should have consistent sizing.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Responsive Design
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Items automatically wrap and adjust based on available space while maintaining equal widths.

Fixed Width

All items have exactly the same width regardless of content length. This creates a rigid, uniform grid.

Rigid Layout

Perfect for displaying cards or features that need to be exactly the same size.

Predictable Sizing

Items maintain their exact width and wrap to new rows when needed.

_bookshop_name: wrappers/grid
minItemWidth: 270
maxItemWidth: 270
equalWidth: true
verticalAlignment: stretch
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Fixed Width
            level: h3
          - _bookshop_name: primitives/paragraph
            text: All items have exactly the same width regardless of content length. This creates a rigid, uniform grid.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Rigid Layout
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Perfect for displaying cards or features that need to be exactly the same size.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Predictable Sizing
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Items maintain their exact width and wrap to new rows when needed.

Short

Short content.

Medium Length Content

This item has medium length content that determines its natural width.

Longer Content Title

This item has significantly more content and will be wider.

Tiny

Small.

_bookshop_name: wrappers/grid
equalWidth: false
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Short
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Short content.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Medium Length Content
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has medium length content that determines its natural width.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Longer Content Title
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has significantly more content and will be wider.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Tiny
            level: h3
          - _bookshop_name: primitives/paragraph
            text: Small.

Vertical Alignment Options

Short Item

This is a short grid item.

Taller Item

This grid item has more content and will be taller than the others. It demonstrates how items align to the top when using start alignment.

Medium Item

This item has medium height content.

_bookshop_name: wrappers/grid
minItemWidth: 200
maxItemWidth: 250
verticalAlignment: start
equalWidth: true
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Short Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This is a short grid item.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Taller Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This grid item has more content and will be taller than the others. It demonstrates how items align to the top when using start alignment.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Medium Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has medium height content.

Short Item

This is a short grid item.

Taller Item

This grid item has more content and will be taller than the others. It demonstrates how items align to the center when using center alignment.

Medium Item

This item has medium height content.

_bookshop_name: wrappers/grid
minItemWidth: 200
maxItemWidth: 250
verticalAlignment: center
equalWidth: true
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Short Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This is a short grid item.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Taller Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This grid item has more content and will be taller than the others. It demonstrates how items align to the center when using center alignment.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Medium Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has medium height content.

Short Item

This is a short grid item.

Taller Item

This grid item has more content and will be taller than the others. It demonstrates how items align to the bottom when using end alignment.

Medium Item

This item has medium height content.

_bookshop_name: wrappers/grid
minItemWidth: 200
maxItemWidth: 250
verticalAlignment: end
equalWidth: true
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Short Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This is a short grid item.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Taller Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This grid item has more content and will be taller than the others. It demonstrates how items align to the bottom when using end alignment.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Medium Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has medium height content.

Short Item

This is a short grid item that will stretch to match the height of the tallest item.

Taller Item

This grid item has more content and will be taller than the others. All items will stretch to match this height.

Medium Item

This item has medium height content but will stretch to match the tallest item.

_bookshop_name: wrappers/grid
minItemWidth: 200
maxItemWidth: 250
verticalAlignment: stretch
equalWidth: true
items:
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: surface
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Short Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This is a short grid item that will stretch to match the height of the tallest item.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: accent
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Taller Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This grid item has more content and will be taller than the others. All items will stretch to match this height.
  - contentBlocks:
      - _bookshop_name: wrappers/container
        backgroundColor: highlight
        contentBlocks:
          - _bookshop_name: primitives/heading
            text: Medium Item
            level: h3
          - _bookshop_name: primitives/paragraph
            text: This item has medium height content but will stretch to match the tallest item.