Defining Custom Grid Layouts

To define new grid layouts first in your custom module or theme you need to define a new yaml file custom_name.paragraphs.grid_layouts.yml. Inside of this file you will define YAML configurations for all custom layouts you need.

Here is an example of 2 equal columns layout on bigger screens which transforms to 1 column layout for smaller screens. Example is using Bootstrap layout utility classes:

paragraphs_explore_theme_1_1_column:
  title: '2 columns 1 - 1'
  description: 'Defines a two equal column layout.'
  wrapper_classes:
    - row
    - g-responsive
  columns:
    -
      classes:
        - col
        - col-12
        - col-md-6
  libraries:
    - 'paragraphs_explore_theme/layout'

The wrapper_classes values will be applied to paragraphs items wrapper element.

Classes values from columns array will be applied to individual paragraph items. If there are more items then columns grid layout system will loop columns classes from the start to finish untill all paragraph items didn't recived defined CSS classes.

Layout configuration can also define libraries which will be loaded when this layout is used on some paragraph.

Here is a more complex responsive layout example with 3 columns:

paragraphs_explore_theme_1_2_1_column:
  title: '3 columns 1 - 2 - 1 Desktop, first/last half centered and middle full columns Medium'
  description: 'Defines a three columns layout of 1/4, 1/2 and 1/4 width.'
  wrapper_classes:
    - row
    - g-responsive
  columns:
    -
      classes:
        - col
        - col-12
        - col-md-6
        - col-lg-3
        - mx-auto
    -
      classes:
        - col
        - col-12
        - col-lg-6
    -
      classes:
        - col
        - col-12
        - col-md-6
        - col-lg-3
        - mx-auto