Different columns count for different breakpoints in responsive grid.

Ivan_Andrianovs

13-12-2018

Hi Community.

Is it possible to configure Responsive grid (wcm/foundation/components/responsivegrid) component to have different columns number in different beakpoints?. E.g. I'd liked to have 12 columns in desktop, 6 for tablet and 4 for mobile. As I see back-end and front-end code is ready for that, but I didn't found how to configure it.

Thanks in advance.

BR, Ivan

Accepted Solutions (1)

Accepted Solutions (1)

Arun_Patidar

MVP

18-12-2018

Hi,

I am not sure if this is possible, you can set the width though, why don't you divide 12 grid into equal parts and setup width for mobile and tablet.

Answers (3)

Answers (3)

Ivan_Andrianovs

18-12-2018

Thank you for your response. Actually, I need to define different columns for  mobile (4) and tablet (12) breakpoints for the same responsive grid component.

Arun_Patidar

MVP

13-12-2018

Hi,

Could you please check Configuring Layout Container and Layout Mode   if helps?

Configuring Breakpoints using XML

Breakpoints are located inside the <jcr:content> section of the .context.html under the appropriate template (or content) folder.

An example definition:

1

2

3

4

5

6

<cq:responsive jcr:primaryType="nt:unstructured">

  <breakpoints jcr:primaryType="nt:unstructured">

    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>

    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>

  </breakpoints>

</cq:responsive>

Configure the Grid of the Layout Container

You can configure the number of columns available for each specific instance of layout container:

Definitions for the responsive grid are specified in:etc/design/<your-project-name>/.content.xml

The following parameters can be defined:
  • Number of columns available:
    • columns="{String}8"
  • Components that can be added to the current component:
    • components="[/libs/wcm/foundation/components/responsivegrid, ...