-ms-grid -ms-grid-rows -ms-grid-row -ms-grid-columns -ms-grid-column

style: display:-ms-grid
-ms-grid-columns和-ms-grid-rows的值可以为:
》标准长度单位,如像素
》对象宽度(对于列)或高度(对于行)的百分比
》auto 关键字,表示行宽和行高基于其中的项调整
》min=content关键字,表示将任何子元素的最小宽度或高度用作宽度或高度
》max-content关键字,表示将任何子元素的最大宽度或高度用作宽度或高度
》minmax(a, b)关键字,表示宽度或高度介于a和b之间(只要可用空间允许)
》分数单位fr,表示可用空间应根据其分数值在列或行之间分配
例子:-ms-grid-columns:auto 100px 1fr 2fr;-ms-grid-rows:50px auto;

<div style="border: 1px solid gray;  800px; display: -ms-grid; -ms-grid-columns: auto 100px 1fr 2fr; -ms-grid-rows: 50px auto;">
<p style="margin: 2px; border: 1px solid gray;">Chind Element 1</p>
<p style="margin: 2px; border: 1px solid gray;">Chind Element 2</p>
<p style="margin: 2px; border: 1px solid gray;">Chind Element 3</p>
<p style="margin: 2px; border: 1px solid gray;">Chind Element 4</p>
<p style="margin: 2px; border: 1px solid gray;">Chind Element 5</p>
</div>

此网格有四列,且每一列按照下述方式显示
》列 1(auto 关键字):列适合于列中的内容。
》列 2 ("100px"):列的宽度为 100 像素。
》列 3 ("1fr":列占据剩余空间的一个分数单位。
》列 4 ("2fr":列占据剩余空间的两个分数单位。

由于此网格中总共有三个分数单位,所以列 3 被分配了剩余空间的 1/3—即 3 个分数单位—中的 1 个分数单位。列 4 则被分配了剩余空间的 2/3。

同样,此网格有两行,且每一行将按照下述方式显示:
》行 1 ("50px"):行的高度为 50 像素。
》行 2(auto 关键字):行适合于行中的内容。

若要对网格中的子项目进行定位,请使用 -ms-grid-column 和 -ms-grid-row 属性指定每个项目所在的列和行。

            <div style="border: 1px solid gray;  800px; display: -ms-grid; -ms-grid-columns: auto 100px 1fr 2fr; -ms-grid-rows: 50px auto">
                <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 1; -ms-grid-row: 1">
                    Child element 1
                </p>
                <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 2; -ms-grid-row: 1">
                    Child element 2
                </p>
                <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 3; -ms-grid-row: 1">
                    Child element 3
                </p>
                <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 4; -ms-grid-row: 1">
                    Child element 4
                </p>
                <p style="margin: 2px; border: 1px solid gray; -ms-grid-column: 1; -ms-grid-row: 2">
                    Child element 5
                </p>
            </div>

http://msdn.microsoft.com/zh-CN/library/windows/apps/jj841108.aspx

原文地址:https://www.cnblogs.com/grj1046/p/3208074.html