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 a 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.