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

 

屬性不少,沒再進一步研究.具體再看參考文檔