display: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

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