Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

In template how to create 3 column layout

Avatar

Level 2

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.

 

layout.PNGlayout1.PNG

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

View solution in original post

1 Reply

Avatar

Community Advisor

@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

Avatar

Community Advisor

What version of core components are you using?

Avatar

Correct answer by
Community Advisor

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