How to create custom layouts in Drupal 8 & 9

How to create custom layouts in Drupal 8 & 9

The layout builder lets users change the way their content is presented. There was some projects in Drupal 7 which were similar to layout builder, but it was never as effective, or as user friendly like the Layout API. The layout, when set up, can affect a content type globally, or user can change layout per node.

The layout builder can be used in two ways. You can use it to create a layout for each content type on your site and you can also use it to create a layout for each individual piece of content.

in this tuto I'll show you how to create custom layouts with Layout API in drupal 8 & 9.

Create Custom Module

Go ahead and create a custom module called mymodule.

If you use Drush, just run the following command and fill in the prompts.

drush generate module

NOTE: The generate command only works in Drush 9 and up.

Or, you can do it the old fashion way.

1. Create a folder in modules/custom/mymodule.

2. Create a mymodule.info.yml file and add the following into it:

name: My Module
type: module
description: The description.
package: Custom
core: 8.x
core_version_requirement: ^8 || ^9

Create Custom Layouts

Create a mymodule.layouts.yml file in your theme or module.  Add information for your layout. It’s mandatory to add a machine name, label, category, template reference, and regions in this format.

Example:

In the template file, you can add regions that you create in the mymodule.layouts.yml file in the form of twig variables.

layout_oneplusfourgrid_section:
  label: 'Custom One plus four grid'
  path: layouts/oneplusfourgrid_section
  template: layout--oneplusfourgrid-section
  library: mymodule/oneplusfourgrid_section
  category: 'Custom grid'
  default_region: first
  icon_map:
    - [first, second, third]
    - [first, fourth, fifth]
  regions:
    first:
      label: First
    second:
      label: Second
    third:
      label: Third
    fourth:
      label: Fourth
    fifth:
      label: Fifth

Create a templates directory, where you will have templates for your layout. In my case it’s: layouts/oneplusfourgrid_section/layout--oneplusfourgrid-section.html.twig

In the template file, you can add regions that you create in the mymodule.layouts.yml file in the form of twig variables.

Example:

{#
/**
 * @file
 * Default theme implementation to display a one plus four grid layout.
 *
 * Available variables:
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
  'layout',
  'layout--oneplusfourgrid-section',
]
%}
{% if content %}
  <div{{ attributes.addClass(classes) }}>

    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
      </div>
    {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      <div class="layout__four-grid-group">
    {% endif %}

      {% if content.second %}
        <div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
          {{ content.second }}
        </div>
      {% endif %}

      {% if content.third %}
        <div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
          {{ content.third }}
        </div>
      {% endif %}

      {% if content.fourth %}
        <div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
          {{ content.fourth }}
        </div>
      {% endif %}

      {% if content.fifth %}
        <div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
          {{ content.fifth }}
        </div>
      {% endif %}

    {% if content.second or content.third or content.fourth or content.fifth %}
      </div>
    {% endif %}

  </div>
{% endif %}

also add a file mymodule.libraries.yml which contained the style of the layouts.

Example:

oneplusfourgrid_section:
  css:
    theme:
      layouts/oneplusfourgrid_section/oneplusfourgrid_section.css: {}

The above code snippet produces the following icon map: 

Then any section use our layout will be displayed like this:

Read this tuto If you want to add custom settings to layouts in Drupal 8 & 9.