locked
Simple HTML -ms-grid question - -ms-grid in another -ms-grid

    Question

  • So I started working on this app today. I want 6 boxes with a picture and some text next to the picture inside the box.

    I started with the first box in the upper left corner (just for making this one first, and then copy it when it works) and as you can see,  I have now space for my picture but when I write text (Child element 0) it just jumps down. I don't know how to fix this. I thought about making a new -ms-grid in the <div> but I don't know if that will work. Do anybody have an idea of how I can make the rest of the box write-able?

    EDIT: Can't upload image, but here's a link http://social.msdn.microsoft.com/Forums/getfile/231074

     <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="fragment homepage">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Title!</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div style="border: 1px gray; width: 1000px; height: auto; display: -ms-grid; 
                    -ms-grid-columns: 300px 50px 300px; 
                    -ms-grid-rows: 200px 200px 200px;">
                    <div id="div0" style="border: 1px solid gray;"> <div id="div00"></div><p>Child element 0</p></div>
                    <div id="div1" style="border: 1px solid gray"> Child element 1</div>
                    <div id="div2" style="border: 1px solid gray"> Child element 2</div>
                    <div id="div3" style="border: 1px solid gray"> Child element 3</div>
                    <div id="div4" style="border: 1px solid gray"> Child element 4</div>
                    <div id="div5" style="border: 1px solid gray"> Child element 5</div>
                </div>  
            </section>
        </div>
    </body>
    • Edited by Potices Tuesday, February 05, 2013 7:20 PM
    Tuesday, February 05, 2013 5:10 PM

Answers

  • Yes, you can do nested grids. A child element in your situation can have display: -ms-grid; itself.

    Here's an example derived from my book. Consider a piece of HTML with some nested elements:

    <div id="mainContent">
        <section id="section">
            <div id="photoSection" class="subsection">
                <h2 class="group-title">Photo</h2>
                <img id="photo" class="graphic"/>
            </div>
        </section>
    </div>
    

    Here's some CSS that will nest the section in mainContent, and nest photoSection within that, all with grids:

    #mainContent {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 128px 1fr 60px;	
    }
    
    #section {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr 40px 1fr 40px;
        -ms-grid-rows: 1fr;
    }
    
    #photoSection {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
    
    .subsection {
        display: -ms-grid;
        -ms-grid-rows: 40px 1fr;
        -ms-grid-columns: 1fr;
    }
    
    .group-title {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
    
    .graphic {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        width: 100%;
        height: 100%;
    }
    
    

    So what you're doing is entirely supported and quite common. Nested grids are one of the easiest ways to do such layout.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by Potices Wednesday, February 06, 2013 2:34 PM
    Tuesday, February 05, 2013 8:15 PM

All replies

  • Yes, you can do nested grids. A child element in your situation can have display: -ms-grid; itself.

    Here's an example derived from my book. Consider a piece of HTML with some nested elements:

    <div id="mainContent">
        <section id="section">
            <div id="photoSection" class="subsection">
                <h2 class="group-title">Photo</h2>
                <img id="photo" class="graphic"/>
            </div>
        </section>
    </div>
    

    Here's some CSS that will nest the section in mainContent, and nest photoSection within that, all with grids:

    #mainContent {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 128px 1fr 60px;	
    }
    
    #section {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr 40px 1fr 40px;
        -ms-grid-rows: 1fr;
    }
    
    #photoSection {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
    }
    
    .subsection {
        display: -ms-grid;
        -ms-grid-rows: 40px 1fr;
        -ms-grid-columns: 1fr;
    }
    
    .group-title {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }
    
    .graphic {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        width: 100%;
        height: 100%;
    }
    
    

    So what you're doing is entirely supported and quite common. Nested grids are one of the easiest ways to do such layout.

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press


    • Marked as answer by Potices Wednesday, February 06, 2013 2:34 PM
    Tuesday, February 05, 2013 8:15 PM
  • Thank you very much! I'm very glad for your answer.
    Wednesday, February 06, 2013 2:37 PM