开始说网格布局之前,先说一下什么是网格布局和下面用到的两个新属性,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
-
第一个单位 length,表示包含块的网格
-
第二个单位%,表示快的宽度
-
grid-row
-
第一个单位 length,表示包含块的网格
-
第二个单位%,表示快的高度。
浏览器效果
参考:网格布局