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行高度自动

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

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

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

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

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

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

只是这样就完成

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

display:grid

原文：https://www.cnblogs.com/mirrortom/p/10805490.html