ResponsiveGrid:How to controll default grid size ?

[ryuatnorcal]

Hello Community!

I have another question relative with AEM in responsive design.

I use to use bootstrap to make responsive site so I try to understand how I can use in AEM grid system while making component.

I made some wrapper components that can gives you options of 6 by 6, 4 by 3 and 3 by 4 for example.

I realized that the responsivegrid gives a page, aemGrid -default-12 classes like following.
It works like I want to do but I think I can clean up a little bit.

Here are my questions,

1) Is there any way I can tell this line (<sly data-sly-resource="${'LGrid' @resourceType='wcm/foundation/components/responsivegrid'}"></sly>), how many column it needs for default ?

2) Is it possible to define column like "col-12 col-sm-6" in AEM grid, so it can expand 12 col when the screen size is smaller.

3) What is the differentce between aem-Grid--xx and aem-Gri--default-xx

So that ideally, I can redundant the nested code.

following sudo code is my ideal way to show the content if possible.

<div class="row">
     <div class="aem-Grid aem-Grid--6 aem-Grid--default--12"></div> 
     <div class="aem-Grid aem-Grid--6 aem-Grid--default--12"></div>
</div>

Let me know  if you know answer to it !

Thanks !

[smacdonald2008]

Veena_07

-- what are yout thoughts here?

[smacdonald2008]

"I use bootstrap to make responsive site" - we have an ATCE web session on this subject - it may help --- ATACE April 25 2017

[smacdonald2008]

We are going to release a column component article very soon that may help here.

[VeenaVikraman]

I think this is the exact problem we wer trying to solve out smacdonald2008​. My approach to such a problem would be

     - create a component which will control the column. In which the author should have the ability to select the column he want.

- It is perfectly possible. Sample coming your way soon. You can modify according to your needs

[ryuatnorcal]

Thank you @veena_07 and @smacdonald2008

For @veena_07, Do you know how to make it happen the 2) ?

I was googling around the responsive Grid and all the page I ended up was this page - Responsive Layout - docs.adobe.com

There are a lot of what I can do but it missing How I can make it happen

If you know how then please let me know !

thanks !

Ryu