Grid网格布局入门

Grid网格布局入门

Grid网格布局在前端的实际应用中非常广泛。其作用是将网页划分成一个个网格，且这些网格可以随意组合，具有很强的便利性。例如百度风云榜中的今日上榜（如下图），也可使用网格来完成。

网格的属性：
1.作用在父容器上的属性
（1） display : grid
（2）grid-template-columns : 设置列数
（3）grid-template-rows : 设置行数

<style>
        #box{width: 300px;height: 300px; background: red;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}
  </style>

 <div id="box"></div>

从代码中可以看到，给box设置了三行三列的网格，每一个网格宽高分别为100px 100px;

这样重复设置同样的值会比较麻烦，这时候我们可以使用repeat(）值和fr单位。fr是比例单位,等分可用空间。将上面代码换一下，看看效果：

 #box{width: 300px;height: 300px; background: red;display: grid;grid-template-columns:repeat(3,1fr);grid-template-rows: repeat(3,1fr);}