一个简单的CSS网格布局（CSS Grid Layout）

开始说网格布局之前，先说一下什么是网格布局和下面用到的两个新属性，fr和repeat函数的定义。

如上图，网格布局就是指通过水平和垂直创建的一种模式，可以在这个模式上排列元素，网格通常具有行（row）和列（column）以及间隙（列跟列之间的距离，gutter）。

• fr布局单位

fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

• repeat

CSS 函数表示轨道列表中的重复部分，它使得可以更紧凑地写入列和行重复。

首先是示例的HTML代码片段

    <div class="wrapper">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">13</div>
        <div class="col span6">14</div>
        <div class="col span3">15</div>
        <div class="col span2">16</div>
    </div>

用网格创建一个布局，一行四列，每列等宽。

 .wrapper {
            /* 转化元素类型 */ display: grid;
            /* 设置网格的间隙 */ grid-gap: 10px;
            /* 设置每列的尺寸 */ grid-template-columns: repeat(4, 1fr);
        }

这里说一下repeat（4,1fr）的作用，创建4列等宽的网格，每列1fr他们所占的空间量相等。

可以到浏览器查看一下效果，为了方便显示可以添加一个背景颜色

 .col {background: rgb(255, 150, 150);}

修改网格所占行与列

修改列所占比重.span6 { grid-column: 2 / 4;} 修改行所占比重：.span6 { grid-row: 2 / 4;}

• grid-column

1. 第一个单位 length，表示包含块的网格
2. 第二个单位%，表示快的宽度

• grid-row

1. 第一个单位 length，表示包含块的网格
2. 第二个单位%，表示快的高度。

浏览器效果

 

 

 

参考：网格布局