Building Responsive Layouts with the Grid Fragment

Availability: Liferay DXP 7.3+.

Liferay DXP uses responsive design by default, but there are situations where you want additional and more granular control of the content layout. By using the Grid Fragment in your Content Page, you gain precise control of the content layout for the different screen sizes in desktop and mobile devices. When you edit a Content Page, you can use the Grid Fragment (1) to outline your content and define customized layout styles (2) for the different target devices in the Device Display section (3). For example, you can customize the number of modules per row or the grid padding options for smartphone-size screens only.

Using the Grid Fragment you can customize the layout options for different screen sizes.

Consider the following example. The Services section of your insurance company website provides potential customers an overview of the services you offer. This section uses a series of Card Fragments inside a three-modules Grid Fragment, with information for three different services.

You can customize your content layout combining the Grid Fragments with other Fragments.

When you access this ‘Services’ Content Page from your computer, the grid layout shows the expected result. However, when you access the page from your smartphone, the result is not optimal because of the amount of text and the width of each Card Fragment. Using the Grid Fragment Styles, you can customize the number of cards to show on each module and modify styles for the best viewing experience on different screen sizes.

The default grid layout style is not optimized for a smartphone-sized screen.

Modifying the Layout of the Grid Fragment

Configure the Grid Fragment on the Content Page.
In the Editing sidebar, click the Browser () button and click the Grid Fragment you want to customize.
In the Device Display section of the Editing Toolbar, select the screen size you want to optimize.
In the Configuration Sidebar, under the General tab, select the preferred layout options for the screen size. For example, one module per row works much better for the Portrait Phone layout option.
Select the image to configure its Resolution for the target screen size (available in Liferay DXP 7.4+), or leave the default Auto option to use Adaptive Media.
Click Publish.
Optionally, click the Simulation () button on the main toolbar to see your changes on the target device.