In template how to create 3 column layout

[sagrawal]

Hi I have 3 components and I want to add them all in thee columns in a page. But when I do drag the layout frame left or right it again takes the full page.  Layout frame is not remain in same position.

[Nikhil-Kumar]

@sagrawal 


Which versoin of AEM are you using ?
Try verifying the below configuration of Clientlib required to make this happen:
https://docs.adobe.com/content/help/en/experience-manager-64/administering/operations/configuring-re...

Let me know if it doesn't work, faced and resolved it some days back.
Thanks,
Nikhil

[sagrawal]

i am using 6.4

[arunpatidar]

What version of core components are you using?

[sagrawal]

I am using 6.4 version.

[arunpatidar]

what is the version of core components? not AEM.

[raj_mandalapu · Accepted solution]

Resizing won't work by default, you need to add grid.less file in your client library.

Can you please try by placing below script. 

@Import "/etc/clientlibs/wcm/foundation/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

@grid-gutter-width: 24px;
 
/* default breakpoint */
.aem-Grid {
    .generate-grid(default, @max_col);
    width: auto;
}
 
/* phone breakpoint */
@media (max-width: 650px) {
    .aem-Grid {
        .generate-grid(phone, @max_col);
    }
}

/* tablet breakpoint */
@media (min-width: 651px) and (max-width: 1200px) {
    .aem-Grid {
        .generate-grid(tablet, @max_col);
    }
}

.aem-GridColumn {
    padding: 0 @Grid-gutter-width/2;
}

/* TODO: find a better place for this */
/* additional styling for components in grid */ 

.aem-GridColumn.text.parbase p {
    *padding: 0 20px;
    text-align: justify;
}