Customize column control

 

OOTB provides components related to the  column controls, but If we directly drag and drop the components on to the page, we can't find such number of columns in the column control. Because we need to add styles to define different columns:
Here you go..
Customize column control:
---------------------------------------------------------------------------
Add the following styles in css:
/* layout 0 : 50% 50%  i.e., two columns wiht 50% , 50%*/
div.cq-colctrl-lt0 { }
div.cq-colctrl-lt0-c0 { width: 340px; margin-right:10px}
div.cq-colctrl-lt0-c1 { width: 340px; margin-left: 10px}
/* layout 1 : 33% 33% 33%  Three columns */
div.cq-colctrl-lt1 { }
div.cq-colctrl-lt1-c0 { width: 220px; margin-right: 10px;}
div.cq-colctrl-lt1-c1 { width: 220px; margin-left: 10px; margin-right: 10px;}
div.cq-colctrl-lt1-c2 { width: 220px; margin-left: 10px; }
Add follwoing colctrl design mode:
---------------------------------------------------------------------------
2;cq-colctrl-lt0      2 Columns (50%, 50%)
3;cq-colctrl-lt1      3 Columns (33%, 33%, 33%)

so that we can get options for two & three columns.