Layout In Liferay 7 DXP

Layout in Liferay Lets us define the Grids into the Liferay Page, Which allows us to systematical arrange the portlet applications and contents into the page, To Create a layout in Liferay 7 DXP, I have already created a Liferay Gradle Workspace in my machine.

Environment
Liferay Developer Studio/ IDE 3.1.2 GA3
Liferay 7 CE/DXP Portal Tomcat 7 GA4
JDK 8
MySql 5.7

Step 1 : Create New Liferay Module Project

 

Step 2 : Select layout-template and click next

Step 3 : Give Component Class Name and package name and click finish

 

A Layout Module will be created with following directory structure



my-layout.tpl
This is the main file in Liferay's Layout, I am going to customize this layout into my required layout as shown below.
Lets See how we can create the Layout s shown above, below is the simple code snippet for my layout

my-layout.tpl

<div class="my-layout" id="main-content" role="main">
 
 <div class="portlet-layout row" style="background-color: red;">
 
  <div class="col-md-6 portlet-column portlet-column-first" id="column-1" style="background-color: pink;">
   $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
  </div>

  <div class="col-md-6 portlet-column portlet-column-last" id="column-2" style="background-color: green;">
   $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
  </div>
  
 </div>
 
 <div class="portlet-layout row" >
  
  <div class="col-md-6 portlet-column portlet-column-first" id="column-3" style="background-color: yellow;">
   $processor.processColumn("column-3", "portlet-column-content portlet-column-content-first")
  </div>

  <div class="col-md-6 portlet-column portlet-column-last" id="column-4" style="background-color:aqua;">
   $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
  </div>
  
 </div>
 
</div>

Components and Classes In Layout

portlet-layout row : This class indicates each row container in the Layout Grid System.

$processor.processColumn : It have 2 arguments, id and Classes
Id : It Must be an unique identifier for each column

col-md-6 : We can use different Boostrap Grid Classes in our layout, in our case this class indicates 50% of the available parent DIV size.

portlet-column : Its the container which holds the Portlet column.

portlet-column-first : use this class if you have multiple columns in the layout, it indicates first column of the layout.

portlet-column-last : use this class if you have multiple columns in the layout, it indicates Last column of the layout.

portlet-column-only : use this class if you have only one column in the layout.

portlet-column-content : this class is used to indicate the portlet content in the column.

my-layout.png :  image for the layout, we can define this image indicating layout grid.

liferay-layout-templates.xml 
we can define the layout template file path, layout image file path, layout id, layout name and etc

<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 7.0.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_7_0_0.dtd">

<layout-templates>
 <custom>
  <layout-template id="my-layout" name="my-layout">
   <template-path>/my-layout.tpl</template-path>
   <thumbnail-path>/my-layout.png</thumbnail-path>
  </layout-template>
 </custom>
</layout-templates>

After applying the my-layout to an empty page, The final layout outcome must look like this.

Note : Every Column DIV must have $processor.processColumn, If you don't provide the $processor.processColumn then that DIV will not be considered as portlet container and the DIV cannot hold any portlet.

Just to identify the rows and columns, i have used the different colors, make sure you remove them.