HTML5 For Windows Store学习（2）

上次在布局中学习了Flexbox，这次学习Grid

1.Grid基础

　　画出一个2*2的Grid，在CSS中控制Grid

<div class="grid fragment">
       <section aria-label="Main Content" role="main" class="swiper">
           <div id="simple">
               <h2>Simple Grid</h2>
               <div class="explanation">this is a simple 2*2 grid</div>
               <div class="msgrid">
                   <div>A</div>
                   <div>B</div>
                   <div>C</div>
                   <div>D</div>
               </div>
           </div>
       </section>
    </div>

 四个div，包含四个字母，将他们布局在“田”字型内

.grid #simple > div.msgrid {/*选中msgrid这个div*/
    display:-ms-grid;/*设置为grid布局*/
    -ms-grid-columns:250px 250px;/*2列，2行*/
    -ms-grid-rows:250px 250px;
}
.grid #simple > div.msgrid > div {/*选中msgrid类包含的所有小div*/
    border:1px solid gray;
}
.grid #simple > div.msgrid > div:nth-child(2) {/*选中msgrid中的第二个div，类推*/
    -ms-grid-column:2;/*布局其单元格，在xaml里grid是0开始，这儿是1开始*/
    -ms-grid-row:1;
}
.grid #simple > div.msgrid > div:nth-child(3) {
    -ms-grid-column:1;
    -ms-grid-row:2;
}
.grid #simple > div.msgrid > div:nth-child(4) {
    -ms-grid-column:2;
    -ms-grid-row:2;
}

 完成，效果图：

2.跨列/跨行

设置一个3*3的Grid，演示跨列、跨行，xaml里的Grid.RowSpan/Grid.ColumnSpan

<div class="grid fragment">
       <section aria-label="Main Content" role="main" class="swiper">
           <div id="span">
               <h2>Row/Col Span</h2>
               <div class="explanation">this is a introduction of how to use row/column span</div>
               <div class="msgrid">
                   <div></div>
                   <div></div>
                   <div></div>
               </div>
           </div>
       </section>
    </div>

 下面是css

.grid #span > div.msgrid {/*选中msgrid这个div*/
    display:-ms-grid;/*设置为grid布局*/
    -ms-grid-columns:1fr 1fr 100px;/*2列，2行*/
    -ms-grid-rows:1fr 1fr 100px;/*fr用来描述剩余空间，宽度是300px的话，设为1fr 1fr 1fr则会平摊grid的列*/
    width:600px;
    height:600px;
}

.grid #span > div.msgrid > div:nth-child(1) {/*选中msgrid中的第1个div，类推*/
    -ms-grid-column:1;/*布局其单元格，在xaml里grid是0开始，这儿是1开始*/
    -ms-grid-row:1;
    -ms-grid-row-span:2;
    border:2px solid blue;
}
.grid #span > div.msgrid > div:nth-child(2) {
    -ms-grid-column:2;
    -ms-grid-row:2;
    -ms-grid-column-span:2;
    border:2px solid green;
}
.grid #span > div.msgrid > div:nth-child(3) {
    -ms-grid-column:2;
    -ms-grid-row:3;
    border:2px solid red;
}

 结果：

3.自定义样式布局

用div自定义一种样式

<div class="grid fragment">
       <section aria-label="Main Content" role="main" class="swiper">
           <div id="span">
               <h2>FancyGrid</h2>
               <div class="explanation">this is a introduction of how to use grid to create cool layout</div>
               <div class="msgrid">
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
               </div>
           </div>
       </section>
    </div>

 css

.grid #span > div.msgrid {/*选中msgrid这个div*/
    display:-ms-grid;/*设置为grid布局*/
    -ms-grid-columns:240px 240px 240px;/*3列，3行*/
    -ms-grid-rows:174px 174px 174px;
}
    .grid #span > div.msgrid > div {
        border:1px solid;
        margin:5px;
    }
        .grid #span > div.msgrid > div:nth-child(1) {
            -ms-grid-row:1;
            -ms-grid-column:1;
        }
        .grid #span > div.msgrid > div:nth-child(2) {
            -ms-grid-row:2;
            -ms-grid-column:1;
        }
        .grid #span > div.msgrid > div:nth-child(3) {
            -ms-grid-row:3;
            -ms-grid-column:1;
        }
        .grid #span > div.msgrid > div:nth-child(4) {
            -ms-grid-row:1;
            -ms-grid-column:2;
            -ms-grid-row-span:3;
        }
        .grid #span > div.msgrid > div:nth-child(5) {
            -ms-grid-row:1;
            -ms-grid-column:3;
        }
        .grid #span > div.msgrid > div:nth-child(6) {
            -ms-grid-row:2;
            -ms-grid-column:3;
        }
        .grid #span > div.msgrid > div:nth-child(7) {
            -ms-grid-row:3;
            -ms-grid-column:3;
        }

 这里有一个问题，nth-child与nth-of-type的区别，还好有人已经对比过了：

 

继续，上面的结果