In template how to create 3 column layout

Avatar

Avatar

sagrawal

Avatar

sagrawal

sagrawal

19-09-2020

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

raj_mandalapu

Avatar

raj_mandalapu

raj_mandalapu

20-09-2020

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

 

Answers (2)

Answers (2)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840

Avatar

Arun_Patidar

MVP

Total Posts

3.0K

Likes

1.1K

Correct Reply

840
Arun_Patidar
MVP

20-09-2020

What version of core components are you using?

Avatar

Avatar

Nikhil-Kumar

MVP

Avatar

Nikhil-Kumar

MVP

Nikhil-Kumar
MVP

19-09-2020

@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