Auto Responsive Layout on component

[ShaggySPFLD]

I'm developing a "columns" component where the user can select the number of "columns" they want to create.  Our users find creating nested containers difficult and the idea is to make it easier for them to create more ornate layouts.  As an example if they want two columns then they would be able to select a 50/50 setting on the component and have 2 columns each 50% of the total width or they could select the 33/33/33 and have 3 columns of equal width.  This layout works well for desktop view, but I'm also trying to automate handling of mobile displays for them so they don't have to modify widths for when the information is displayed on a mobile device.

What is the recommended way to pre-set the component so that on desktop they are next to each other, but on mobile devices they are stacked on top of each other and take full width?  If i was doing this within classic jquery bootstrap i would have something along the lines of

for the 33/33/33 for example

<div class="row">

<div class="col-md-4 col-sm-12"></div>

<div class="col-md-4 col-sm-12"></div>

<div class="col-md-4 col-sm-12"></div>

<div>

Where the col-md-4 would take care of anything 768px and larger and the col-sm-12 would be 768 and smaller.

[ShaileshBassi]

Hi @shaggyspfld For the component layout, the recommended way to proceed is with the Layout Container component.

This way the authors get the flexibility as well in the long run if any design change is required. 

There is an option to move to the new line within OOTB as well.

 You can choose from the grid i.e. coming on the top e.g. if you want the new line only on mobile, choose mobile as the layout and then click on this float to new line. This configuration will be applicable only on the mobile devices.

Hope this helps!

Thanks

[ShaggySPFLD]

As I mentioned in this case I don't want the users to think about the setting up the different looks for mobile and desktop, I want to have the control have those different layouts built in from the start.  If AEM is supposed to be for end-users then it needs to be for the most basic of users and this is how we're removing that knowledge barrier for our users.

I think what i was looking for i was able to find on my own with some more digging.  Using the AEM grid system you can go ahead and specify the classes manually on the component, in this particular case it's ok to "lock in" the sizes for the given viewports.  So I would do something along these lines for what i need.

<div class="aem-Grid aem-Grid--3 aem-Grid--default--3 aem-Grid--phone--12 "></div>

<div class="aem-Grid aem-Grid--3 aem-Grid--default--3 aem-Grid--phone--12 "></div>

<div class="aem-Grid aem-Grid--3 aem-Grid--default--3 aem-Grid--phone--12 "></div>