| Recommended | Not Recommended |
|---|---|
| Custom Layouts: Grid should be used when a design calls for non-standard column widths. | Standard Layouts: Don't use the grid for common layouts (for example, 50%/50%, or 33%/33%/33%), these layouts should be built with Bolt Layout instead. |
| Unpredictable Patterns: Use grid when a design layout contains non-standard or unpredictable column widths and breakpoint behaviors. | Consistent Patterns: Don't use the grid when the design layout follows common predictable column widths and breakpoint behaviors. These layouts should be built with Bolt Layout instead. |
{% include '@bolt-layouts-grid/grid.twig' with {
gutter: 'medium',
row_gutter: 'medium',
items: [
{
column_start: '1',
column_span: '1',
row_start: '1',
row_span: '1',
valign: 'start',
content: 'Item Content',
},
]
} only %}| 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
|
|
|
row_gutter
|
Spacing between the rows of the grid. |
string
|
medium
|
|
|
items
|
Array of grid items to render inside the grid. |
array
| — |
|
| 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
|
|
|
column_start
|
The general column the grid item should start on. For example, a |
string
| — |
|
|
column_end
|
The general column the grid item should stop on. For example, a |
string
| — |
|
|
column_span
|
The number of columns the |
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 |
string
|
auto
|
|
npm install @bolt/layouts-gridBy 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.
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.
Main content in the center (column start 3 and column span 8) with 2 asides.
Main content with an aside (column start 9 and column span 4).
Row start and row span are also available, they are for less common layouts.
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.
| Regular Option | Responsive Option | |
|---|---|---|
column_start
|
1 to 12 | 1@breakpoint-name to 12@breakpoint-name |
column_span
|
1 to 12 | 1@breakpoint-name to 12@breakpoint-name |
row_start
|
1 to 12 | 1@breakpoint-name to 12@breakpoint-name |
row_span
|
1 to 12 | 1@breakpoint-name to 12@breakpoint-name |
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.
In this example, the item 1 is starting at column 1 and spanning 6 columns wide, the item 2 is starting at column 7 and spanning 6 columns.
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.
Use the @breakpoint options to do advanced responsive layouts.
column_start: '1', column_span: '12 3@small 4@medium', row_start: '2 1@small'column_start: '1 5@small 4@medium', column_span: '12 8@small 9@medium', row_start: '1 1@small'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.
To align an item to the start, set column start to 1.
To align an item to the center, set column start by using this formula: (12 - column_span) / 2 + 1.
To align an item to the end, set column start by using this formula: (12 - column_span) + 1.
Offset by 1 column from the center.
Offset by 1 column from the start.
Vertical alignment of an item can simply be defined by the valign prop.