sap.m grid system to build layout

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
  id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" 
  data-sap-ui-libs="sap.m, sap.ui.layout" 
  data-sap-ui-resourceroots='{"view": "./view"}'>
    
  </script>
  <script>
    var ui5Core = sap.ui.getCore();

    var view = sap.ui.view({
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });

    var layoutModel = new sap.ui.model.json.JSONModel();
    layoutModel.setData({
      left: 2,
      right: 1
    });

    ui5Core.setModel(layoutModel, "LayoutModel");

    view.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

/* Styles go here */

.column{
    border: 1px solid #895;
    -webkit-transition: 2s;
    transition: 2s;
}

<core:View controllerName="view.Main" xmlns="sap.m"   
    xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"   
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:l="sap.ui.layout">      
    <App>
      <Page showHeader="false">
        <content>
          <l:Grid defaultSpan="L4 M12 S12">
            <l:content>
                <HBox class="column"> 
                    <html:div>
                        a fist column span 12
                    </html:div>
                    <layoutData>
                        <l:GridData span="L12 M12 S12" />
                    </layoutData>
                </HBox>
                
                <VBox id="vBoxCol1" class="column">
                    <html:div>
                        COL 1
                    </html:div>
                    <layoutData>
                        <l:GridData span="L8 M8 S12" />
                    </layoutData>
                </VBox>
                
                <VBox id="vBoxCol2" class="column">
                    <html:div>
                        COL 2
                    </html:div>
                    <layoutData>
                        <l:GridData span="L2 M2 S12" />
                    </layoutData>
                </VBox>
                
                <VBox id="vBoxCol3" class="column">
                    <html:div>
                        COL 3
                    </html:div>
                    <layoutData>
                        <l:GridData span="L2 M2 S12" />
                    </layoutData>
                </VBox>
                
            </l:content>
          </l:Grid>
        </content>
      </Page>
    </App>  
</core:View>

sap.ui.controller("view.Main", {

  onAfterRendering: function() {
    this.byId("vBoxCol1").addDelegate({
      onclick: jQuery.proxy(function() {
        this.expandColumn("left");
      }, this)

    });

    this.byId("vBoxCol2").addDelegate({
      onclick: jQuery.proxy(function() {
        this.expandColumn("center");
      }, this)

    });

    this.byId("vBoxCol3").addDelegate({
      onclick: jQuery.proxy(function() {
        this.expandColumn("right");
      }, this)

    });
  },
  expandColumn: function(column) {
    switch (column) {
      case "left":
        this.byId("vBoxCol1").setLayoutData(new sap.ui.layout.GridData({
          span: "L8 M8 S12"
        }));
        this.byId("vBoxCol2").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        this.byId("vBoxCol3").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        break;
      case "center":
        this.byId("vBoxCol1").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        this.byId("vBoxCol2").setLayoutData(new sap.ui.layout.GridData({
          span: "L8 M8 S12"
        }));
        this.byId("vBoxCol3").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        break;
      case "right":
        this.byId("vBoxCol1").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        this.byId("vBoxCol2").setLayoutData(new sap.ui.layout.GridData({
          span: "L2 M2 S12"
        }));
        this.byId("vBoxCol3").setLayoutData(new sap.ui.layout.GridData({
          span: "L8 M8 S12"
        }));
        break;
      default:
    }

  }

});