Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh

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


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

  label: 'Custom One plus four grid'
  path: layouts/oneplusfourgrid_section
  template: layout--oneplusfourgrid-section
  library: mymodule/oneplusfourgrid_section
  category: 'Custom grid'
  default_region: first
    - [first, second, third]
    - [first, fourth, fifth]
      label: First
      label: Second
      label: Third
      label: Fourth
      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.


 * @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 = [
{% if content %}
  <div{{ attributes.addClass(classes) }}>

    {% if content.first %}
      <div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
        {{ content.first }}
    {% 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 }}
      {% endif %}

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

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

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

    {% if content.second or content.third or content.fourth or content.fifth %}
    {% endif %}

{% endif %}


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


      layouts/oneplusfourgrid_section/oneplusfourgrid_section.css: {}



The above code snippet produces the following icon map: 

custom layout icon



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

custom layout


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

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts


Page Facebook