In template how to create 3 column layout

Avatar

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
sagrawal
Level 2

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
Validate 1
MVP
raj_mandalapu
MVP

Likes

125 likes

Total Posts

203 posts

Correct reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

125 likes

Total Posts

203 posts

Correct reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
raj_mandalapu
MVP

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
Coach
MVP
Arun_Patidar
MVP

Likes

1,440 likes

Total Posts

3,305 posts

Correct reply

940 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,440 likes

Total Posts

3,305 posts

Correct reply

940 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

20-09-2020

What version of core components are you using?

Avatar

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Boost 250
MVP
Nikhil-Kumar
MVP

Likes

251 likes

Total Posts

262 posts

Correct reply

38 solutions
Top badges earned
Boost 250
Validate 1
Ignite 3
Ignite 1
Give Back 5
View profile
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