How to specify the number of columns on a page through a layout file

dmitrii_fediuk · December 23, 2015, 8:37am

You can specify the the number of columns on a page through a layout XML file: using the layout attribute of the page tag.

XSD shema

github.com

magento/magento2/blob/2.0.0/lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd#L20


<xs:include schemaLocation="urn:magento:framework:View/Layout/etc/body.xsd"/>
<xs:include schemaLocation="urn:magento:framework:View/Layout/etc/html.xsd"/>


<xs:complexType name="pageType">
    <xs:sequence minOccurs="0" maxOccurs="unbounded">
        <xs:element name="html" type="htmlType" minOccurs="0" maxOccurs="unbounded"/>
        <xs:element name="body" type="bodyType" minOccurs="0" maxOccurs="unbounded"/>
        <xs:element name="head" type="headType" minOccurs="0" maxOccurs="unbounded"/>
        <xs:element ref="update" minOccurs="0" maxOccurs="unbounded"/>
    </xs:sequence>
    <xs:attribute  type="xs:string" name="layout" />
    <xs:attribute  type="xs:string" name="label" />
    <xs:attribute  type="xs:string" name="design_abstraction" />
</xs:complexType>


<xs:element name="page" type="pageType">
    <xs:unique name="blockKey">
        <xs:selector xpath=".//block"/>
        <xs:field xpath="@name"/>
    </xs:unique>
    <xs:unique name="containerKey">

Examples

Look at the examples from the core.

The default Magento 2 page layout has 3 columns:

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Theme/view/frontend/layout/default.xml#L8


<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <update handle="default_head_blocks"/>
   <body>
       <referenceContainer name="after.body.start">
           <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
           <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
           <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
           <block class="Magento\Framework\View\Element\Js\Cookie" name="js_cookies" template="Magento_Theme::js/cookie.phtml"/>
           <block class="Magento\Theme\Block\Html\Notices" name="global_notices" template="html/notices.phtml"/>
       </referenceContainer>
       <referenceBlock name="top.links">

The default frontend product view page layout has a single column:

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L8


<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
       <css src="mage/gallery/gallery.css"/>
   </head>
   <update handle="catalog_product_opengraph" />
   <update handle="page_calendar"/>
   <body>
       <attribute name="itemtype" value="http://schema.org/Product" />
       <attribute name="itemscope" value="itemscope"/>
       <referenceBlock name="head.components">
           <block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Catalog::js/components.phtml"/>

The default frontend customer account page layout has two columns: a wide right and a tiny (sidebar) left:

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Customer/view/frontend/layout/customer_account.xml#L8


<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Customer My Account (All Pages)" design_abstraction="custom">
   <body>
       <attribute name="class" value="account"/>
       <referenceContainer name="sidebar.main">
           <block class="Magento\Framework\View\Element\Html\Links" name="customer_account_navigation" before="-" template="Magento_Customer::account/navigation.phtml">
               <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-account-link">
                   <arguments>
                       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
                       <argument name="path" xsi:type="string">customer/account</argument>
                   </arguments>
               </block>

How are the standard layout types defined

They are defined ion the layouts.xml files.

Frontend layout types

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Theme/view/frontend/layouts.xml#L8-L21


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="1column">
    <label translate="true">1 column</label>
</layout>
<layout id="2columns-left">
    <label translate="true">2 columns with left bar</label>
</layout>
<layout id="2columns-right">
    <label translate="true">2 columns with right bar</label>
</layout>
<layout id="3columns">
    <label translate="true">3 columns</label>
</layout>
</page_layouts>

Backend layout types

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Theme/view/adminhtml/layouts.xml#L8-L18


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="admin-empty">
    <label translate="true">Admin empty</label>
</layout>
<layout id="admin-1column">
    <label translate="true">Admin 1column</label>
</layout>
<layout id="admin-2columns-left">
    <label translate="true">Admin 1column</label>
</layout>
</page_layouts>

The common (both for the frontend and the backend) layout types

github.com

magento/magento2/blob/2.0.0/app/code/Magento/Theme/view/base/layouts.xml#L8-L12


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="empty">
    <label translate="true">Empty</label>
</layout>
</page_layouts>

How to define a new layout type?

See the examples in the core’s unit tests:
https://github.com/magento/magento2/blob/2.0.0/lib/internal/Magento/Framework/View/Test/Unit/PageLayout/_files/layouts_one.xml#L8-L12

github.com

magento/magento2/blob/2.0.0/lib/internal/Magento/Framework/View/Test/Unit/PageLayout/_files/layouts_two.xml#L8-L12


<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="two">
    <label translate="true">Two</label>
</layout>
</page_layouts>

The official documentation

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html

dmitrii_fediuk · February 18, 2016, 12:23pm

XSD shema

Examples

How are the standard layout types defined

Frontend layout types

Backend layout types

The common (both for the frontend and the backend) layout types

How to define a new layout type?

See the examples in the core’s unit tests: https://github.com/magento/magento2/blob/2.0.0/lib/internal/Magento/Framework/View/Test/Unit/PageLayout/_files/layouts_one.xml#L8-L12

The official documentation

See the examples in the core’s unit tests:
https://github.com/magento/magento2/blob/2.0.0/lib/internal/Magento/Framework/View/Test/Unit/PageLayout/_files/layouts_one.xml#L8-L12