Responsive Grid component clarification

[manikanthar1295]

HI Team,

I have custom component where Author can author number Like (1,2,3,4,5,6) any value.

If Author Authors Like 4 Then i am getting the value in sling model from that i need to include the Responsive grid  like 

<div class="aem-Grid aem-Grid--12">

<div class="aem-GridColumn aem-GridColumn--default--4"></div>

 <div class="aem-GridColumn aem-GridColumn--default--4"></div>

<div class="aem-GridColumn aem-GridColumn--default--4"></div>

</div>

If Author Authors like 6 then the Responsive grid should like 

<div class="aem-Grid aem-Grid--12">

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

 <div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

 <div class="aem-GridColumn aem-GridColumn--default--2"></div>

<div class="aem-GridColumn aem-GridColumn--default--2"></div>

</div>

Based on Author Number we need to calculate and need to generate Responsive grid

How we can achive this 

[Saravanan_Dharmaraj · Accepted solution]

@manikanthar1295 Since in sightly you cannot do logic manipulation, you do your logic of how to split 12 columns in model itself and return the result as list like eg: [2,2,2,2,2,2] for "6" selected in dialog. You can loop thru that list and put it in the div.class in sightly. 

you need to think about when 5 is selected, how to divide 12 col by 5. 

[harishpvl1]

you can go through this 'http://www.6dglobal.com/blog/creating-column-control-adobe-cq-2012-02-07' link . Instead of JSP you can use slightly code.

<div data-sly-resource="${ columnList.index @resourceType='wcm/foundation/components/parsys'}"/>

'