How to create custom layout for community pages in salesforce

• Community should be enabled.
• Make sure that community template has Builder option.
  

1) implements=”forceCommunity:layout” – It makes the component available for custom layouts in community.

2) Aura.Component[] – Array of components.

Create a new lightning component and write the following code:

<!--TestCustomLayout.cmp-->
<aura:component implements="forceCommunity:layout" access="global"> <!--Access should be global-->
    
    <!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
     -->
    
    <aura:attribute name="column1" type="Aura.Component[]" required="false"/>
    
    <div class="container">
    	<div class="contentPanel">
        	{!v.column1}
        </div>
    </div>
	
</aura:component>

Add some css to it:

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @author    Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
**/

.THIS .contentPanel:before,
.THIS .contentPanel:after {
    content: "";
    display: table;
}
.THIS .contentPanel {
    width: 100%;
}

Step 1: Open Community Builder.
Step 2: Add a New Page

Click on New Blank Page.

Step 3: You can view the layout you created. Select it for the page.

Step 4: Fill the information, and create page.