Paragraphs grid widget
Paragraphs grid frontend (using bs4, see container breakout class below)

With Paragraphs Grid, you can display multiple paragraph entities in a grid. Supports Out-Of-The-Box Bootstrap 3, 4, 5 and CSS grid from MDC (Material Design).

Additional features:

  • Includes a view mode selector that makes it easy, e.g. Display media entities in the appropriate responsive design.
  • Includes break-out classes that allow you to break the boundaries of the container and display individual paragraphs across the width of the entire display port.
  • The configuration of the grid (breakpoints, number of columns, additional CSS classes, ...) can be adjusted via YAML files.

Installation

  1. Download and Install Paragraphs Grid
  2. In the menu you go to „Configuration > Content authoring > Paragraphs grid“ (/admin/config/content/paragraphs_grid) and choose your grid system.
  3. Add a "Paragraphs Grid" field to all your paragraph types (Optional).
  4. Go to the Administer page of your node type (e.g. /admin/structure/types/manage/article/display) and select the „Paragraphs Grid formatter“ for the Paragraphs field (Type: Entity Reference Revisions).

  
Getting started with this YouTube video: https://youtu.be/onU1E2Z6Jvc

Roadmap

  • Documentation and help for developers and editors, accessible directly from the UI.
  • Install the Paragraphs Grid field as an entity-base-field for Paragraphs entities to further enhance the OOTB user experience.
  • Grid-Config-Yaml-File as a theme plugin, similar to the theme.breakpoints.yml file, which is installed via a Discovery Manager.

Drupal 8: Paragraphs grid is ready for use with Bootstrap 3 and 4. Other grid systems (like CSS grid) are still under development. For me it works fine even in production environments. PLEASE HELP to make this module stable, with a shield and all the bells and whistles.

Supporting organizations: 
Supporting open source

Project information

Releases