Grid网格布局介绍
网格布局(Grid)是一种更为强大的CSS布局方案,就像是flex布局的升级版。Grid将元素划分成一个个网格,实现任意组合,做出各种布局。相较于felx布局,Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid布局属性
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
一、display 属性
display: grid
指定一个容器采用网格布局。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.container{display: grid;grid-template-columns: 50px 50px 50px;grid-template-rows: 50px 50px 50px;}.item{font-size: 24px;text-align: center;border: 1px solid #fff;}</style></head><body style="padding-left: 500px;padding-top: 300px;"><span style="font-size: 24px">head</span><div class="container"><div class="item item1" style="background-color: Aqua;">1</div><div class="item item2" style="background-color: Blue;">2</div><div class="item item3" style="background-color: Fuchsia;">3</div><div class="item item4" style="background-color: Green;">4</div><div class="item item5" style="background-color: Maroon;">5</div><div class="item item6" style="background-color: Navy;">6</div><div class="item item7" style="background-color: Olive;">7</div><div class="item item8" style="background-color: Red;">8</div><div class="item item9" style="background-color: Yellow;">9</div></div><span style="font-size: 24px">foot</span></body></html>
运行效果:
display: inline-grid
指定指定元素为行内元素,采用网格布局。
代码同上,display改为inline-grid
运行效果:
ps:设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
二、grid-template-columns 属性、grid-template-rows 属性
指定子元素为网格布局后,可以使用grid-template-columns
和grid-template-rows
属性指定每一列的列宽
和每一行的行高
。
如:指定一行3行3列宽高均为80的元素。
.container{display: inline-grid;grid-template-columns: 80px 80px 80px;grid-template-rows: 80px 80px 80px;}
除了使用绝对高度,也可以使用百分比。(需要指定父元素的宽高。)
.container{width: 306px;height: 306px;display: inline-grid;grid-template-columns: 33.3% 33.3% 33.3%;grid-template-rows: 33.3% 33.3% 33.3%;}
当元素数量过多时,显然全部写出来会非常繁琐。此时可以使用repeat()
函数。repeat()函数接收两个参数值,第一个参数值是重复的次数,第二个参数是重复的值。
如:将上述用repeat()重写后为:、
.container{width: 306px;height: 306px;display: inline-grid;grid-template-columns: repeat(3,33.3%);grid-template-rows: repeat(3,33.3%);}
除了接收固定的次数与值,repeat()
函数也可以接收重复的次数和某种模式。
如:列宽定义重复两次,每次三列,第一列宽度为33px,第二列宽度为66px,第三列宽度为99px
行高定义重复两次,每行高33%
.container{width: 306px;height: 306px;display: grid;grid-template-columns: repeat(2, 33px 66px 99px);grid-template-rows: repeat(2,33%);}
运行效果:
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill
关键字表示自动填充。
如:指定元素每列宽度为300px,然后自动填充,直到容器不能放置更多的列。
.container{display: grid;grid-template-columns: repeat(auto-fill, 300px);grid-template-rows: repeat(2,100px);}
如:指定元素每列宽度为100px,然后自动填充,直到容器不能放置更多的列。
.container{display: grid;grid-template-columns: repeat(auto-fill, 100px);grid-template-rows: repeat(2,100px);}
如:指定元素每列宽度为60px,然后自动填充,直到容器不能放置更多的列。
.container{display: grid;grid-template-columns: repeat(auto-fill, 60px);grid-template-rows: repeat(2,100px);}
为了方便表示比例关系,网格布局提供了fr
关键字(fraction 的缩写,意为"片段")。如果四列的宽度分别为1fr、2fr、4fr、6fr,就表示后面每列依次为第一列2倍、4倍、6倍。
.container{display: grid;grid-template-columns: 1fr 2fr 4fr 6fr;grid-template-rows: repeat(3,33%);}
fr
关键字可以与绝对宽度配合使用,非常方便。
.container{display: grid;grid-template-columns: 100px 1fr 2fr 1fr 100px;grid-template-rows: repeat(2,100px);}
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
如:表示列宽不小于100px,不大于3fr。
.container{display: grid;grid-template-columns: 1fr 2fr minmax(100px, 3fr);grid-template-rows: repeat(3,100px);}
auto
关键字表示由浏览器自己决定长度。
如:第一列和第三列为100px,第二列自动调节。第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width
,且这个值大于最大宽度。
.container{display: grid;grid-template-columns: 100px auto 100px;grid-template-rows: repeat(3,100px);}
grid-template-columns
属性和grid-template-rows
属性里面,还可以使用方括号
,指定每一根网格线的名字,方便以后的引用。
如:代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
网格布局允许同一根线有多个名字,比如[fifth-line row-5]
。
.container{display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];}
实用案例
① 两栏布局
.wrapper {display: grid;grid-template-columns: 70% 30%;}
② 十二网格
grid-template-columns: repeat(12, 1fr);
三、grid-row-gap 属性、grid-column-gap 属性、grid-gap 属性
grid-row-gap
属性设置行与行的间隔(行间距),grid-column-gap
属性设置列与列的间隔(列间距)。如:指定每行每列之间间距20px
.container{display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-row-gap: 20px;grid-column-gap: 20px;}
grid-gap
是grid-column-gap
grid-row-gap
合并简写。语法:grid-gap: <grid-row-gap> <grid-column-gap>;
如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。
如:上述代码用grid-gap改写
.container{display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);grid-gap: 20px 20px;}
根据最新标准,上面三个属性名的grid-
前缀已经删除,grid-column-gap
和grid-row-gap
写成column-gap
和row-gap
,grid-gap
写成gap
。
四、grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域。
如:下述代码先划分出9个单元格,然后将其定名为a
到i
的九个区域,分别对应这九个单元格。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a b c''d e f''g h i';}
如:多个单元格合并成一个区域的写法如下。将9个单元格分成a
、b
、c
三个区域。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a a a''b b b''c c c';}
如:实例顶部是页眉区域header
,底部是页脚区域foote
r,中间部分则为main
和sidebar
。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: "header header header""main main sidebar""footer footer footer";}
如果某些区域不需要利用,则使用"点"(.)表示。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-template-areas: 'a . a''b b .''. c c';}
注意,区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end。
五、grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。
这个顺序由grid-auto-flow
属性决定,默认值是row
,即"先行后列"。也可以将它设成column
,变成"先列后行"。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-auto-flow: column;}
grid-auto-flow
属性除了设置成row
和column
,还可以设成row dense
和column dense
。这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。
如:指定1、2各占两个单元格,在默认情况下,3会跟在2后面,形成以下样式
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: row;}.item{font-size: 24px;text-align: center;border: 1px solid #fff;}.item1, .item2{grid-column-start: 1;grid-column-end: 3;}
设置grid-auto-flow: row dense;
表示"先行后列",并且尽可能紧密填满,尽量不出现空格。形成以下样式:
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: row dense;}
如果设置grid-auto-flow: column dense;
,改为先列后行,出现以下样式。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-auto-flow: column dense;}
六、justify-items 属性、align-items 属性、place-items 属性
和flex
布局类似,justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下)。
.container {justify-items: start | end | center | stretch;align-items: start | end | center | stretch;}
这两个属性可以取以下值:
start
:对齐单元格的起始边缘。end
:对齐单元格的结束边缘。center
:单元格内部居中。stretch
:拉伸,占满单元格的整个宽度(默认值)。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: start;}
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-items: center;}
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;
如果省略第二个值,则浏览器认为与第一个值相等。
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;place-items: start end;}
七、justify-content 属性、align-content 属性、place-content 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。
.container {justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content: start | end | center | stretch | space-around | space-between | space-evenly; }
这两个属性可以取以下值:
start
:对齐容器的起始边框。end
:对齐容器的结束边框。center
: 容器内部居中。stretch
:项目大小没有指定时,拉伸占据整个网格容器。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。space-between
:项目与项目的间隔相等,项目与容器边框之间没有间隔。space-evenly
:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
如:start
.container{width: 350px;height: 350px;border: 1px solid #000;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;justify-content: start;}
center
space-around
space-between
place-content
属性是align-content
属性和justify-content
属性的合并简写形式。
place-content: <align-content> <justify-content>
如:
.container{width: 350px;height: 350px;border: 1px solid #000;display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;place-content:center space-evenly ;}
八、grid-auto-columns 属性、grid-auto-rows 属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-auto-columns
属性和grid-auto-row
s属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
如:
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px;}.item{font-size: 24px;text-align: center;border: 1px solid #fff;}.item8{grid-row-start: 4;grid-column-start: 2;}
九、grid-template 属性、grid 属性
grid-template
属性是grid-template-columns
、grid-template-rows
和grid-template-areas
这三个属性的合并简写形式。
grid
属性是grid-template-rows
、grid-template-columns
、grid-template-areas
、grid-auto-rows
、grid-auto-column
s、grid-auto-flow
这六个属性的合并简写形式。
从易读易写的角度考虑,还是建议不要合并属性
项目属性
一、grid-column-start 属性、grid-column-end 属性、grid-row-start 属性、grid-row-end 属性
项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。
grid-column-start属性:左边框所在的垂直网格线grid-column-end属性:右边框所在的垂直网格线grid-row-start属性:上边框所在的水平网格线grid-row-end属性:下边框所在的水平网格线
.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}.item{font-size: 24px;text-align: center;border: 1px solid #fff;}.item2{grid-column-start: 2;grid-column-end: 4;}
这四个属性的值,除了指定为第几个网格线,还可以指定为网格线的名字。
.item-1 {grid-column-start: header-start;grid-column-end: header-end;}
这四个属性的值还可以使用span
关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
.item-1 {grid-column-start: span 2;}
二、grid-column 属性、grid-row 属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式
grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
grid-column: / ;
grid-row: / ;
.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;}
三、grid-area 属性
grid-area属性指定项目放在哪一个区域。
.item-1 {grid-area: e;}
1号项目位于e区域
grid-area
属性还可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置。
.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}
四、justify-self 属性、align-self 属性、place-self 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;}
这两个属性都可以取下面四个值。
start:对齐单元格的起始边缘。end:对齐单元格的结束边缘。center:单元格内部居中。stretch:拉伸,占满单元格的整个宽度(默认值)。