display:grid

使用grid布局 参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局还没完全用利索,但这个grid布

... .

使用grid布局

参考资料http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

flex布局还没完全用利索,但这个grid布局却真比较好用.

例如37开的左右分栏布局.不用再写很多CSS了.只需要如下

.

<div class="page">  <div class="left"></div>  <div class="right></div>    </div>.page{    display:grid;    grid-template-columns: 30% 70%;    /*grid-template-rows: repeat(9,auto);*/}

.

经常使用册格布局的,这回相当于内置了册格.

display:grid  // 使用网络布局

grid-template-columns:30% 70%; // 列属性,表示第1列占30%,第2列70%;

grid-template-rows:auto;// 行属性,表示第1行高度自动

 

. . . 菜单1 . . 菜单2 . . 菜单3 . . 菜单4 . . 菜单5 . . . 内容 . .

 

弄一个3行5列的册格如何:

grid-template-columns:100px 80px 200px 90px 80px

rid-template-rows:30px 50px 15px;

有几个值表示分几列,和几行

. . 1 . . 12 . . 13 . . 14 . . 15 . . 2 . . 22 . . 23 . . 24 . . 25 . . 3 . . 32 . . 33 . . 34 . . 35 . .

 

如果要实现册格,以前使用display:inline-block 或者 flex.现在只需要:

grid-template-columns: repeat(12,8.3333%);

只是这样就完成

. . 格子1 . . 格子2 . . 格子3 . . 格子4 . . 格子5 . . 格子6 . . 格子7 . . 格子8 . . 格子9 . . 格子10 . . 格子11 . . 格子12 . .

 

属性很多,没再进一步研究.具体再看参考文档

. .. ...