Code
<div class="grid__wrapper grid--column-12 grid--row-3 grid--row-even">
<div class="grid grid--se-1-5 grid--row-span-1 grid--layer-4 grid--as-top ta--left grid--padding-1" style="background-color: #174174;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
<div class="grid grid--se-6-13 grid--row-span-2 grid--layer-4 grid--as-top ta--left grid--padding-1" style="background-color: #2a8abf;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
<div class="grid grid--se-4-8 grid--row-se-1-4 grid--layer-3 grid--as-top ta--left grid--padding-1" style="background-color: #33ccff;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
<div class="grid grid--se-9-11 grid--row-se-1-4 grid--as-top ta--left grid--padding-1" style="background-color: #80addc;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
<div class="grid grid--se-2-4 grid--row-se-1-4 grid--layer-5 grid--as-top ta--left grid--padding-1 grid--bdrs" style="background-color: #dbddf3;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
<div class="grid grid--se-3-5 grid--row-span-3 grid--layer-8 grid--as-top ta--left grid--padding-1" style="background-color: #333333;" data-aos-delay="50">
<div class="grid__content"></div>
</div>
</div>
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
{% if content.field_wrapper.0 is not empty %}
<div class="{{ content.field_wrapper.0 }}">
{% endif %}
<div class="
grid__wrapper
{% if content.field_grid_columns.0 is not empty %}grid--column-{{ content.field_grid_columns.0 }}{% endif %}
{% if content.field_grid_rows.0 is not empty %}grid--row-{{ content.field_grid_rows.0 }}{% endif %}
{% if content.field_vertical_alignment.0 is not empty %}grid--as-{{ content.field_vertical_alignment.0 }}{% endif %}
">
{{ content.field_paragraph_reference }}
</div>
{% if content.field_wrapper.0 is not empty %}
</div>
{% endif %}
{% endblock paragraph %}
Fields
| Label | Machine name | Field type | Values | Character Limit | Required |
|---|---|---|---|---|---|
| Columns | field_grid_columns | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 11|12 |
N/A | No |
| Even Row Height | field_grid_row_height | Boolean | N/A | No | |
| Rows | field_grid_rows | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 11|12 |
N/A | No |
| This Column | field_paragraph_reference | Entity reference revisions | N/A | No | |
| Vertical Alignment | field_vertical_alignment | List (integer) | 0|top 1|middle 2|bottom |
N/A | No |
| Wrapper | field_wrapper | List (integer) | 0|wrapper--full 1|wrapper--1 2|wrapper--2 3|wrapper--3 |
N/A | No |
Use Case
The Grid Wrapper is a layout component that allows content authors to create overlapping layouts (if desired)
The content author can select the number of columns and rows to a maximum of 12.
More options for grid will be adding soon such as if a grid column should be full width at different breakpoints and the gutter size for rows and columns.
Component Options
Wrapper
wrapper--full = Full Width
wrapper--1 = Wide (1320px)
wrapper--2 = Medium (1020px)
wrapper--3 = Small (720px)
Rows
Set the total number of rows to be used for this section.<br />The default is 1 and the max is 12.
Even Row Height
This is disabled by default but when enabled it will make the grid rows the same height.
Vertical Alignment
Pick from top, middle or bottom alignment.
Grid Columns
Set the total number of columns to be used for this section.<br />The default is 1 and the max is 12.
Vertical Alignment
Pick from top, middle or bottom alignment.
Text Alignment
Pick from left, centre or right aligned text.
