About the Grid layout in Split template


  • Hi guys,

    I've created a new JavaScript metro project with Split template, but I cannot understand some of the css defined for itemPage.html. Here's the html markup:

    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">MetroMovieFinder</span>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>

    and the css is:

    /* This selector is used to prevent ui-dark/light.css from overwriting changes
       to .win-surface. */
    .itemspage .itemslist .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 116px;
    .itemspage .itemslist {
        height: 100%;
        position: relative;
        width: 100%;
        z-index: 0;
        .itemspage .itemslist .win-horizontal.win-viewport .win-container {
            margin-bottom: 6px;
            margin-right: 6px;
        .itemspage .itemslist .win-item {
            -ms-grid-columns: 1fr;
            -ms-grid-rows: 1fr 90px;
            display: -ms-grid;
            height: 250px;
            width: 250px;
            .itemspage .itemslist .win-item .item-image {
                -ms-grid-row-span: 2;
            .itemspage .itemslist .win-item .item-overlay {
                -ms-grid-row: 2;
                -ms-grid-rows: 1fr 21px;
                display: -ms-grid;
                padding: 6px 15px 2px 15px;
                .itemspage .itemslist .win-item .item-overlay .item-title {
                    -ms-grid-row: 1;
                    overflow: hidden;
                    width: 220px;
                .itemspage .itemslist .win-item .item-overlay .item-subtitle {
                    -ms-grid-row: 2;
                    width: 220px;

    Like the style: "-ms-grid-rows: 1fr 21px;" what's the "fr"?

    Happy programming, happy life.

    Thursday, April 05, 2012 8:09 AM