CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上,进而快速、便捷的对页面结构进行布局,提高工作效率
“flexbox” 是一维的布局,是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局,一行或者一列。
相比较 “Grid网格布局”,则是二维布局可以同时处理行和列上的布局
通常适用于布局页面主要的区域布局或小型组件
兼容
ie10、ie11支持带前缀-ms-
基本概念
容器与项目
采用网格布局的区域,称为"容器"(container)。 容器内部采用网格定位的子元素,称为"项目"(item)。
行和列
容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
单元格
行和列的交叉区域,称为"单元格"(cell)
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。
网格线
划分网格的线,称为"网格线"(grid line)。 水平网格线划分出行,垂直网格线划分出列。
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线, 比如三行就有四根水平网格线。
网格属性
Grid 布局的属性分成两类。 一类定义在容器上面,称为容器属性; 另一类定义在项目上面,称为项目属性。
容器属性
设置为网格布局
-
设置为块级网格
div { display: grid; }
-
设置为行级网格
div { display: inline-grid; }
注意
-
不是网格的直接子元素,不参与网格布局
-
设为网格布局以后,容器子元素(项目)的float、display: inline-block、vertical-align和column-*等设置都将失效。
列宽与行高
grid-template-columns网格布局中列的数量(和宽度)
grid-template-rows网格布局中行的数量(和高度)
语法
-
空格隔开的一组值列表
-
其中每个值指定相应列的宽度/行的高度。
取值
-
默认值 none
-
绝对单位px
grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;
-
百分比
.container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; }
-
fr 关键字
fraction 的缩写,意为部分
-
弹性系数,按比例分配剩余空间(如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍)
-
可以与绝对长度的单位结合使用
-
-
auto 关键字
关键字表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
-
minmax()
-
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值
即空间不足时以最小以min显示,空间有剩余时最大按max显示
-
注意:如果max值小于min值,则该值会被视为min值。最大值可以设置为fr但最小值则不行
grid-template-columns: 1fr 1fr minmax(100px, 1fr); minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。
-
-
-
repeat( )函数
-
作用:简化重复的值
-
接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值
repeat(重复的次数,一个或空格隔开的多个值 ) grid-template-columns: repeat(2, 100px);表示共两列,每列各100px
-
第二个参数为空格隔开的多个值 时表示,重复某种模式。
grid-template-columns: repeat(2, 100px 20px 80px); 定义了6列,第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px。
-
-
auto-fill 关键字
【单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格时使用】
grid-template-columns:repeat(auto-fill,100px); 表示每列宽度100px,然后自动填充,直到容器不能放置更多的列。
设置行与行的间隔(行间距)
column-gap属性设置列与列的间隔(列间距)
row-gap属性设置行与行的间隔(行间距)
取值
-
默认值 0
-
px
-
百分比(相对于容器)
简写grid-gap
-
gap: 行间距 列间距; 【空格】隔开
-
省略了第二个值,浏览器认为第二个值等于第一个值
单元格在容器垂直位置,水平位置
justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)
取值
-
start - 对齐容器的起始边框。
-
end - 对齐容器的结束边框。
-
center - 容器内部居中。
-
stretch - 列宽或行高为auto时有效
-
space-around - 单元格两侧间隔相等。所以,单元格之间的间隔比单元格与容器边框的间隔大一倍。
-
space-between - 剩余空间分布在单元格之间,单元格与容器边框之间没有间隔。
-
space-evenly - 剩余空间均等分布在单元格与单元格,单元格与项目之间。单元格与容器边框之间间隔相等
简写
place-content属性是align-content属性和justify-content属性的合并简写形式。
-
place-content:垂直 水平 【空格】隔开
-
如果省略第二个值,浏览器就会假定第二个值等于第一个值。
项目(内容)在单元格中的垂直、水平位置
justify-items 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时)
align-items 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)
取值
-
start:对齐单元格的起始边缘。
-
end:对齐单元格的结束边缘。
-
center:单元格内部居中。
-
stretch:拉伸,占满单元格的整个宽度(默认值)
简写
place-items属性是align-items属性和justify-items属性的合并简写形式。
-
place-items: 垂直 水平; 【空格隔开】
-
如果省略第二个值,则浏览器认为与第一个值相等。
项目放置顺序
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行
grid-auto-flow 属性
-
默认值是row,即"先行后列"。
-
column,变成"先列后行"。
-
dense 自动稠密补位布局 [尽可能紧密填满,尽量不出现空格]
网格项命名(给网格划分区域)
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成
通过grid-template-areas 属性实现
取值
-
默认值 none
-
一个双引号一行,一个空格一列
grid-template-areas: "种花 养鱼 菠菜" "西瓜 冬瓜 南瓜";
-
多个单元格合并成一个区域的写法
grid-template-areas: 'a a a' 'b c c' 'd d d';
-
某些区域不需要利用,则使用"点"(.)表示。
.wrap { width: 300px; height: 300px; border: 1px solid #000; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); grid-template-areas: "a a a" "b . c" "d d d"; margin:20px auto; } .header{ background-color: orange; grid-area:a; } .side{ background-color: yellowgreen; grid-area:b; } .main{ background-color: #ccc; grid-area:c; } .footer{ background-color: pink; grid-area:d; }
<div class="wrap"> <div class="header">header</div> <div class="main">main</div> <div class="side">side</div> <div class="footer">footer</div> </div>
项目属性
grid-area指定项目具体显示区域
可以通过网格区域名指定,也可以通过指定四条组成网格区域的网格线确定。
取值:
-
none 默认值。 没有命名的网格区域
-
网格区域名(指定使用grid-template-areas属性自定义一些网格区域)
-
通过指定grid子项所占据的区域的起始和终止位置
-
grid-column-start属性:左边框所在的垂直网格线
-
grid-column-end属性:右边框所在的垂直网格线
-
grid-row-start属性:上边框所在的水平网格线
-
grid-row-end属性:下边框所在的水平网格线
简写
-
grid-column属性是grid-column-start和grid-column-end的合并简写形式
-
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
-
以斜杠分割 开始/结束
-
斜杠以及后面的部分可以省略,默认跨越一个网格。
-
-
.item-1 { grid-column: 1 / 3; grid-row: 1 / 2; } /* 等同于 */ .item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
item-1 { background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3; } /* 等同于 */ .item-1 { background: #b03532; grid-column: 1 / span 2; grid-row: 1 / span 2; }
注:如果项目指定的网格区域是重叠的可以使用z-index 进行调整层级
单独指定单元素格内容的对齐
justify-self属性设置单元格内容的水平位置(左中右)
align-self属性设置单元格内容的垂直位置(上中下)
-
start:对齐单元格的起始边缘。
-
end:对齐单元格的结束边缘。
-
center:单元格内部居中。
-
stretch:拉伸,占满单元格的整个宽度(默认值)
简写
-
place-self属性是align-self属性和justify-self属性的合并简写形式。
-
如果省略第二个值,place-self属性会认为这两个值相等