grid网格布局

最近有空也看了一下grid布局 做下笔记

----------------2019.8.14--------------

grid container网格容器

grid item网格项目

<div class='container'> //网格内容容器
    <div class='item'></div> //网格项目
    <div class='item'></div>
</div>

grid line网格线（存在于网页中 但是看不到）

grid cell 网格单元

grid track网格轨道

grid area网格区域（四个grid line包围的总空间/区域）

display:grid（当设置了网格布局，float、column、vertical-align等将失效）

display:subgrid目前很多浏览器不兼容

fr为网格内容单位 表示剩余空间做等分

grid-template-column纵列     grid-template-row横列