Different columns count for different breakpoints in responsive grid.

[karanmahi]

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

[karanmahi]

Hi Ivan - Did you get the response? I have the same requirement to configure 6 columns for mobile and 12 for desktop and tablet

[#3 · Accepted solution]

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.

[#4]

I'd liked to forbid authors to break up the design. Anyway, thank you for your reply.

[#5]

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.

[#6]

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, ...