grid docs

Bolt Grid

Getting Started

CSS-Grid powered Grid component. Still in very early develpment so use with caution!

Install via NPM
npm install @bolt/components-grid

Usage 

{% include "@bolt-components-grid/grid.twig" with {
  vinset: "medium",
  items: [
    {
      row_start: "1",
      column_start: "1",
      column_span: "12 6@medium",
      content: "Grid Item 1",
      attributes: {
        class: [
          "t-bolt-dark",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "2",
      column_start: "7 1@small 5@medium",
      column_span: "12 6@small 5@medium",
      content: "Grid Item 2",
      attributes: {
        class: [
          "t-bolt-light",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "3 3@small 3@medium 3@large",
      column_start: "1 7@small 1@medium",
      column_span: "6 12@small 4@medium",
      content: "Grid Item 3",
      attributes: {
        class: [
          "t-bolt-xdark",
          "u-bolt-padding-medium",
        ]
      }
    },
    {
      row_start: "4 1@medium",
      row_span: "1 3@medium",
      column_start: "1 1@small 10@medium",
      column_span: "12 12@small 3@medium",
      content: "Grid Item 4",
      attributes: {
        class: [
          "t-bolt-dark",
          "u-bolt-padding-medium",
        ]
      }
    },
  ]
} only %}

Schema

Flexible component to build out CSS Grid-based layouts

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

 N/A
row_gutter string
  • none, small, medium, large

Specifies the row gutter size between the rows of the grid.

 none
vinset string
  • none, xsmall, small, medium, large, xlarge

The size of the inner space (vertical inset) that sits above / below the grid itself

 none
items array
    • content

      Content to render inside each <bolt-grid-item>

    • position

      Layout-specific config options for each internal <bolt-grid-item>

      • @bolt-components-grid/grid-item.schema.yml > Object details
        • attributes

          A Drupal-style attributes object with extra attributes to append to this component.


          Type: object
        • align

          Horizontal alignment of the grid item itself


          Type: string
          • start, center, end
        • valign

          Vertical alignment of the grid item itself


          Type: string
          • start, center, end
        • column_start

          The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.


          Type: string
        • column_end

          The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.


          Type: string
        • column_span

          The number of columns the should span across


          Type: string
        • row_start

          Specifies a grid item’s start position within the grid row


          Type: string
        • row_end

          Specifies a grid item’s ending position within the grid row


          Type: string
        • row_span

          Specifies the number of rows a should span across


          Type: string

Array of content items to display inside the grid itself.

 N/A

grid

Grid Item 1 Grid Item 2 Grid Item 3 Grid Item 4

grid row gutter variations

Row Gutter: none Grid Item 1 Grid Item 2 Grid Item 3 Row Gutter: small Grid Item 1 Grid Item 2 Grid Item 3 Row Gutter: medium Grid Item 1 Grid Item 2 Grid Item 3 Row Gutter: large Grid Item 1 Grid Item 2 Grid Item 3

grid vinset variations

Vinset: none Grid Item 1 Grid Item 2 Grid Item 3 Vinset: xsmall Grid Item 1 Grid Item 2 Grid Item 3 Vinset: small Grid Item 1 Grid Item 2 Grid Item 3 Vinset: medium Grid Item 1 Grid Item 2 Grid Item 3 Vinset: large Grid Item 1 Grid Item 2 Grid Item 3 Vinset: xlarge Grid Item 1 Grid Item 2 Grid Item 3