本文共 11260 字,大约阅读时间需要 37 分钟。
Grid网格布局介绍
- 网格布局(Grid)是一种更为强大的CSS布局方案,就像是flex布局的升级版。Grid将元素划分成一个个网格,实现任意组合,做出各种布局。
- 相较于felx布局,Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
Grid布局属性
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
一、display 属性
-
display: grid
指定一个容器采用网格布局。Title head123456789运行效果:
-
代码同上,display改为inline-grid 运行效果:display: inline-grid
指定指定元素为行内元素,采用网格布局。 -
ps:设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
二、grid-template-columns 属性、grid-template-rows 属性
-
指定子元素为网格布局后,可以使用
如:指定一行3行3列宽高均为80的元素。grid-template-columns
和grid-template-rows
属性指定每一列的列宽
和每一行的行高
。.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%);}
除了接收固定的次数与值,
如:列宽定义重复两次,每次三列,第一列宽度为33px,第二列宽度为66px,第三列宽度为99px 行高定义重复两次,每行高33%repeat()
函数也可以接收重复的次数和某种模式。.container{ width: 306px; height: 306px; display: grid; grid-template-columns: repeat(2, 33px 66px 99px); grid-template-rows: repeat(2,33%);}
运行效果:
-
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用
如:指定元素每列宽度为300px,然后自动填充,直到容器不能放置更多的列。auto-fill
关键字表示自动填充。.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);}
-
如:表示列宽不小于100px,不大于3fr。minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。.container{ display: grid; grid-template-columns: 1fr 2fr minmax(100px, 3fr); grid-template-rows: repeat(3,100px);}
-
如:第一列和第三列为100px,第二列自动调节。第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了auto
关键字表示由浏览器自己决定长度。min-width
,且这个值大于最大宽度。.container{ display: grid; grid-template-columns: 100px auto 100px; grid-template-rows: repeat(3,100px);}
-
如:代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。 网格布局允许同一根线有多个名字,比如grid-template-columns
属性和grid-template-rows
属性里面,还可以使用方括号
,指定每一根网格线的名字,方便以后的引用。[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
属性用于定义区域。
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:/ / / ;}
四、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:拉伸,占满单元格的整个宽度(默认值)。
转载地址:https://kaisarh.blog.csdn.net/article/details/105980594 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!