windows8 develop metro sample code-2 layout

2.layout

2.1 3 columns

html code:

<div id="outerFrame">
            <div id="leftFrame" style="overflow-x: hidden">
            </div>
            <div id="frameSep">
            </div>
            <div id="rightFrame">
            </div>
        </div>

css code:

#outerFrame {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 0px;
}

#leftFrame {
    position: absolute;
    width: 320px;
    height: 100%;
    display:-ms-grid;
    -ms-grid-rows: auto 1fr;
    -ms-grid-columns:1fr;
}

#frameSep {
    margin-left: 320px;
    position: absolute;
    width: 1px;
    height: 100%;
    background: black;
}

#rightFrame {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 321px;
}

looks:

2.2 two rows:

html code:

<div id="leftFrame" style="overflow-x: hidden">
                
                <div style="width: 300px; height: 250px;" id="leftAd"  
                    data-win-control="MicrosoftNSJS.Advertising.AdControl" 
                    data-win-options="{applicationId: 'a83a8b33-9ff8-470a-85e9-44bd362ee9be', adUnitId: '115757'}">
                </div>

                <div id="listContainer">
                    <div id="listLabelView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:GameManager.game.labelsList.dataSource, itemTemplate:select('#mediumListIconTextTemplate'), layout:{type:WinJS.UI.ListLayout}, selectionMode:'single',tapBehavior: 'toggleSelect'}">
                    </div>
                </div>
            </div>

css code:

#leftFrame {
    position: absolute;
    width: 320px;
    height: 100%;
    display:-ms-grid;
    -ms-grid-rows: auto 1fr;
    -ms-grid-columns:1fr;
}

#leftAd {
    -ms-grid-row:1;
}

#listContainer {
    width: 100%;
    -ms-grid-row:2;
}