Magento Open Source 2.3.x

This is the 2.3 Beta release version of Magento documentation. Content in this version is subject to change. For additional versions, see Magento Documentation and Resources.

Page Layout

The layoutThe visual and structural composition of a page. of each page in your store consists of distinct sections, or containers, that define the header, footer, and content areas of the page. Depending on the layout, each page might have one, two, three columns, or more. You can think of the layout as the “floor plan” of the page.

Content blocks float to fill the available space, according to the section of the page layout where they are assigned to appear. You will discover that if you change the layout from a three-column to a two-column layout, the content of the main area expands to fill the available space, and any blocks that are associated with the unused side bar seem to disappear. However, if you restore the three-column layout, the blocks reappear. This fluid approach, or liquid layoutA flexible approach to web design that specifies the size and position of elements as percentages rather than as exact measurements in pixels., makes it possible to change the page layout without having to rework the content. If you are used to working with individual HTMLHyperText Markup Language: A standard for tagging and structuring text, images, videos, and other media on a web page. pages, you will discover that this modular, “building block” approach requires a different way of thinking.



Two Column Page Layout