grid docs

Grid

A flexible 12-column grid with responsive breakpoint options.
HTML Usage

We recommend the use of HTML over Twig for this item.

<bolt-grid>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
</bolt-grid>
 Schema
Grid (grid.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
gutter

Spacing between the columns of the grid.

 string medium
  • none, small, medium, large
row_gutter

Spacing between the rows of the grid.

 string medium
  • none, small, medium, large
items

Array of grid items to render inside the grid.

 array —
    • attributes

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

      • —
    • content

      Content to render inside each grid item.

      • —
    • valign

      Vertical alignment of the grid item itself.

      • start, center, end
    • column_start

      The vertical starting point of the grid item. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column start is set at 6 for any browser width larger and equal to the small breakpoint. This prop is required to make the grid work in Internet Explorer.

      • —
    • column_span

      The number of columns the grid item should span across. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column span is set at 6 for any browser width larger and equal to the small breakpoint.

      • —
    • row_start

      The horizontal starting point of the grid item. This prop is required to make the grid work in Internet Explorer.

      • —
    • row_span

      The number of rows the grid item should span across.

      • —
Grid Item (grid-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
valign

Vertical alignment of the grid item itself

 string auto
  • auto, 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.

 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.

 string —
  • —
column_span

The number of columns the should span across

 string —
  • —
row_start

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

 string auto
  • —
row_end

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

 string auto
  • —
row_span

Specifies the number of rows a should span across

 string auto
  • —
Install Install 
npm install @bolt/layouts-grid
Dependencies @bolt/core

grid

Basic Grid Layout

Bolt Grid is a 12-column grid design approach

By using The Grid to design layouts, consistency is guaranteed. If your goal is to confine your layout to a 12-column grid and have elements spaced and lined up consistently using the Bolt spacing system, The Grid is for you. Otherwise, you should not use The Grid, there is the List component for simple layouts and alignments.

 Demo
X
X
X
X
X
X
X
X
X
X
X
X
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      content: 'Grid item',
    },
    {
      content: 'Grid item',
    },
    ...
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  ...
</bolt-grid>

grid start and span

Grid column start and column span The Bolt Grid is built on the concept of column start and column span, this allows the user to have full control of the grid layout.
Important Notes:

Please refer to the Bolt Breakpoints for all possible breakpoint names. number@breakpoint-name means starting at that specific breakpoint, change to the number defined. For example: column-span="6@small" means starting at the small breakpoint, span 6 columns.
Demo
Aside
Main
Aside
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '2',
      content: item_aside,
    },
    {
      column_start: '3',
      column_span: '8',
      content: item_main,
    },
    {
      column_start: '11',
      column_span: '2',
      content: item_aside,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="1" column-span="2">
    <!-- Aside Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="3" column-span="8">
    <!-- Main Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="11" column-span="2">
    <!-- Aside Content -->
  </bolt-grid-item>
</bolt-grid>

grid gutter variations

Grid Gutter Variations The space between each column, known as a gutter, is configurable with the variable of the same name. The default value is medium.
Important Notes:

All accepted values for gutter can be seen in the Schema tab at the top of this page.
Demo

None Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Medium Gutter

Span 4 columns
Span 4 columns
Span 4 columns
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  gutter: 'large',
  ...
} only %}
HTML
<bolt-grid gutter="large">
  <!-- Grid Items -->
</bolt-grid>

grid row gutter variations

Grid Row Gutter Variations The space between each row, known as a rowigutter or row_gutter, is configurable with the variable of the same name. The default value is medium.
Important Notes:

All accepted values for row-gutter can be seen in the Schema tab at the top of this page.
Demo

None Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Medium Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  row_gutter: 'large',
  ...
} only %}
HTML
<bolt-grid row-gutter="large">
  <!-- Grid Items -->
</bolt-grid>

grid item column span variations

Grid Item Column Span Variations Each item can span from 1 to 12 columns. Use any combination that adds up to 12 columns to form a row.
Important Notes:

In this example, the item 1 is starting at column 1 and spanning 3 columns wide, the item 2 is starting at column 4 and spanning 9 columns.
Demo
Item 1
Item 2
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '3',
      content: item_1,
    },
    {
      column_start: '4',
      column_span: '9',
      content: item_2,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="1" column-span="3">
    <!-- Item 1 Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="4" column-span="9">
    <!-- Item 2 Content -->
  </bolt-grid-item>
</bolt-grid>

grid item row span variations

Grid Item Row Span Variations Each item can span from 1 to 12 rows. Row span works as long as you have multiple rows. For example, if you only have 2 rows of content, you cannot have an item to span 3 rows because the highest you can get is 2. Demo SPAN 3 ROWS
Row
Row
Row
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      row_span: '3',
    ...
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-span="3">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item responsive breakpoints

Grid Item Responsive Breakpoints

Use the @breakpoint options to do advanced responsive layouts. More information about breakpoints can be found on the dedicated page.

  • Item 1
    1. Up to small breakpoint: start at row 2 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 4 columns
    3. Starting at medium breakpoint: start at row 1 and span for 3 columns
  • Item 2
    1. Up to small breakpoint: start at row 1 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 8 columns
    3. Starting at medium breakpoint: start at row 1 and span for 9 columns
 Demo
Item 1
Item 2
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '12 4@small 3@medium',
      row_start: '2 1@small',
      content: item_1,
    },
    {
      column_start: '1 5@small 4@medium',
      column_span: '12 8@small 9@medium',
      row_start: '1 1@small',
      content: item_2,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-start="2 1@small" column-start="1" column-span="12 4@small 3@medium">
    <!-- Item Content -->
  </bolt-grid-item>
  <bolt-grid-item row-start="1 1@small" column-start="1 5@small 4@medium" column-span="12 8@small 9@medium">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item align variations

Grid Item Alignment Variations

The alignment must be set manually by using column start and column span, that way the user can position the item exactly as intended with the flexibility doing more than the common start, center, and end alignments.
Important Notes:

Example: To align an item to the end, set column start by using this formula: (12 - column_span) + 1.
Demo
Column start at 9 and span 4
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '9',
      column_span: '4',
      content: item_end,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="9" column-span="4">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item valign variations

Grid Item Vertical Alignment Variations

Vertical alignment of an item can simply be defined by the valign prop.

 Demo
Item
Item
Item
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      valign: 'end',
      ...
    }
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item valign="end">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid traditional columns and rows

Grid Traditional Columns and Rows
  1. Use a parent grid to create rows, each item span for 12 columns.
  2. Inside each item of the parent grid, pass a child grid to create columns.
 Demo
Item
Item
Item
Item
Item
Item
Twig
{% set row %}
  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '4',
        content: item,
      },
      {
        column_start: '5',
        column_span: '4',
        content: item,
      },
      {
        column_start: '9',
        column_span: '4',
        content: item,
      },
    ]
  } only %}
{% endset %}

{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '12',
      row_start: '1',
      row_span: '1',
      content: row,
    },
    {
      column_start: '1',
      column_span: '12',
      row_start: '2',
      row_span: '1',
      content: row,
    }
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-start="1" row-span="1" column-start="1" column-span="12">
    <bolt-grid>
      <bolt-grid-item column-start="1" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="5" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="9" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
    </bolt-grid>
  </bolt-grid-item>
  <bolt-grid-item row-start="2" row-span="1" column-start="1" column-span="12">
    <bolt-grid>
      <bolt-grid-item column-start="1" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="5" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="9" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
    </bolt-grid>
  </bolt-grid-item>
</bolt-grid>