Add menu item components as grid in Editor

[anasustic]

Hi

I am adding menu item components in the header using container component. 

Instead of the menu item components appearing in the Editor one under another I would like them to appear in a grid beside each other. How can I do that?

<sly data-sly-resource="${@ path='headerMenuItems', resourceType='xxx/components/structure/container'}" data-sly-unwrap></sly>

[BrianKasingli · Accepted solution]

@anasustic, theres 2 ways of doing this.

Option 1
Header as atomic component. In this strategy you will create a new experience fragment. Inside that experience fragment you will insert a container component (responsive). Within this container, you will drag in component's you need like Navigation, Language Navigation, Button, Image... you will ensure that the parent container has an ID, and the component's inside of there to lay around with the layout controls. Make sure that the root container has a set ID, and you will use CSS to style everything.

Option 2

Header the AEM GRID, that is produced from https://github.com/adobe/aem-guides-wknd-mobile/blob/master/wknd-mobile.aem/ui.apps/src/main/content...

Using the AEM GRID produced CSS classes, you can use code to put together the structure of your component. https://adobe-marketing-cloud.github.io/aem-responsivegrid/

For example:

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