前端网格布局

概念

将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。

容器属性：

display: grid/inline-grid;

 grid可以将元素转为块元素，inline-grid可以将元素转为行内元素。

 <style>
    span{
        width: 100px;
        height: 100px;
        border:3px solid #000;
    }
    .sp2{
        display: grid;
    }
</style>
<span class="sp1">第一个span</span>
<span class="sp2">第二个span</span>
<span class="sp3">第三个span</span>

划分行和列

划分行：

grid-template-rows: 值;   

可以是多个值，每个值之间使用空格隔开，值的个数表示要划分多少行。每个值都是具体的长度值。

 grid-template-rows: 100px 200px 200px 100px;

表示要划分4行，这4行的高度分别为100px、200px、200px