Documentation

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 (A) to outline your content and define customized layout styles (B) for the different target devices in the Device Display section (C). 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 (A) inside a three-modules Grid Fragment (B), 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 on each Card Fragment (C) and the grid’s padding size (D). 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

  1. Open and edit your Content Page (or create a new Content Page).

  2. Configure the Grid Fragment on the Content Page.

  3. In the Editing sidebar, click Selection and click the Grid Fragment you want to customize.

  4. In the Device Display section of the Editing Toolbar, select the screen size you want to optimize.

    Select the screen size you want to customize in the Device Display section.

  5. In the Editing Sidebar, under the Styles column, select the preferred layout options for the screen size. For example, one module per row works much better for the Portrait Phone layout option.

  6. Configure the image Resolution for the target screen size (available in Liferay DXP 7.4+), or leave the default Auto option to use Adaptive Media .

    Select the image resolution for the target screen size or leave the Auto option to use Adaptive Media.

  7. Click Publish.

  8. Optionally, click the Simulation (Simulation) button on the main toolbar to see your changes on the target device.

    Use the Device Display and Styles options in the Content Page editor to customize the Grid Fragment's layout.

Tip

You can save and reuse the Grid Fragment configuration of your choice in other Content Pages. For more information, see Saving a Fragment Composition.