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