羊了个羊的中强大的Grid布局
目录
- Grid布局中的概念
- 几个函数、单位
- auto-fill 与 auto-fit的区别
- Grid布局和其他布局的区别
- 网格线编号布局
- 网格线名称布局
- 网格区域名称布局
- Grid布局轴线对齐
- 对齐元素到块轴的属性是align-items align-self
- 对齐元素到行轴的属性是justify-items justify-self
- 对齐网格轨道到块轴的属性是 align-content
- 对齐网格轨道到行轴的属性是 justify-content
- 布局示例
Grid布局中的概念
Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid布局远比Flex布局强大。
学习grid布局首先要了解一些名词概念的含义
- 网格容器: 把一个元素设为网格容器的方法,添加属性
display: grid/inline-grid
;容器上有它专门的属性; - 网格线:或称为网格轨道,把网格容器内的网格单元分割开,用浏览器的Grid Inspector 功能可看到网格线;
- 网格项目:或称网格元素,就是放在网格容器内的内容;
- 网格单元/网格区域:网格元素中的最小单位,多个网格单元可称为网格区域;
- 网格间距:网格线/网格轨道的宽度称为成网格间距;
- 嵌套网格:网格容器内可嵌套另一个或几个网格;
- Grid Inspector:浏览器提供的方便查看grid布局的工具;
几个函数、单位
有几个grid布局中特有的单位/函数
- fr:网格容器中可用空间的一等分
- repeat():标识多个重复部分,例如
repeat(3, 100px)
,表示3个100px; - minmax():函数产生一个长度范围,表示长度就在这个范围之中,它接受两个参数,分别为最小值和最大值,比如
minmax(100px, 200px)
表示长度范围是最小值100px,最大值200px; - span:跨度,网格线布局时,表示网格项目跨几个网格单元;
- auto-fill:有时网格单元的大小是固定的,但是容器的大小不确定,这个属性会根据容器大小尽可能多的分配网格,剩余的均分给网格单元;空白的网格单元留空;
- auto-fit:有时网格单元的大小是固定的,但是容器的大小不确定,这个属性会根据容器大小尽可能多的分配网格,剩余的均分给网格单元;空白的网格单元不留空,再次均分给网格单元;
auto-fill 与 auto-fit的区别
ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
其中核心为:grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));意思每个子元素至少需要200px的宽度,如果视口宽度足够就平均分配剩余空间给每个子元素,至于换行问题需要看分配的所有的轨道空间够不够200,如果不够200就换一行,把多的元素换行,比如有580px(不考虑gap),不足以容纳3*200=600,3个子元素,那么就换行,一行两个子元素,那么剩余的80px呢,这就属于剩余空间 ,将(1fr)平均分配给两个轨道。
这里涉及填充模式中的auto-fit
和auto-fill
的区别,auto-fit
和auto-fill
只有在容器宽度大于子元素的最小宽度总和时才有显示区别,例如容器随着窗口现在有1500px宽度,子元素在一行排列总共需要600px(不考虑gap)。
auto-fit
和auto-fill
首先会尽可能多的创建基于min的200px的轨道宽度,例如创建1500/200=7.5。那么会有7个轨道的200px还剩余了100px的剩余空间,接着会把这100px再次分配到这7个轨道中,100/7=14.28。所以每个轨道的宽度现在为214.28px。到这里auto-fill
和auto-fit
做的事情是一样的:
1.首先尽可能的以最小宽度创建轨道;
2.不足一个轨道的空间,等分给已有的轨道;
接下来:auto-fil
auto-fill
对空白轨道的处理不同
3.auto-fill
不占用空白轨道,auto-fit
把空白轨道均分给有内容轨道;
值得注意的是这种区别是在容器中元素数量元素的最小宽度<容器的总宽度时才会显示看到的差异,如果元素数量最小宽度>容器宽度,那么auto-fill
和auto-fit
展现的效果是一样的
Grid布局和其他布局的区别
- 传统布局方式:利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!
- flex布局方式:有自己的一套属性, 效率高, 学习成本低, 兼容性强!
- grid布局:网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!另外grid布局可通过设置属性变为和flex布局一样的效果。
网格线编号布局
当你使用网格布局时,编号线总是存在。这些线从 1 开始按行和列编号。
例如:我们定义一个三行三列的布局如下,行和列方向上我们有 4 条线。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); }
现需要一个网格区域是从最左上角开始,横向占一列,纵向占三行,可以如下写:
grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4;
grid-column
和grid-row
可简写如下:
grid-column: 1/2; grid-row: 1/4;
可用默认跨度为1简写如下:
grid-column-start: 1; grid-row-start: 1; grid-row-end: 4;
可用默认跨度为1加上grid-column
和grid-row
可简写:
grid-column: 1; grid-row: 1/4;
可使用grid-area
简写为:
grid-area: 1/1/4/2;
可使用span
表示跨度简写为:
grid-column: 1; grid-row: 1 / span 3;
网格线名称布局
用grid-template-rows
和grid-template-columns
属性定义网格时,可命名网格线;
.wrap { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [content-end]; }
用grid-area
命名网格区域,则隐式的创建行列网格线;
例如:
grid-area: hd;
则隐式的命名网格线: hd-start
hd-end
用[sidebar-start main-start]
可定义网格线的多个名字;
有了网格线名称则可以用来定位布局项目:
.box1 { grid-column-start: main-start; grid-column-end: main-end; grid-row-start: main-start; grid-row-end: main-end; }
网格区域名称布局
使用grid-area
命名网格区域,在网格容器内用grid-template-areas
指定区域位置:
.header { grid-area: hd } .footer { grid-area: ft } .sidebar { grid-area: sb } .content { grid-area: main } .wrap { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: repeat(3 1fr); grid-template-areas: "hd hd hd" "sb main main" "ft ft ft" }
使用grid-template
可同时设置属性:grid-template-rows
、grid-template-columns
、grid-template-areas
上例可简写:
.header { grid-area: hd } .footer { grid-area: ft } .sidebar { grid-area: sb } .content { grid-area: main } .wrap { display: grid; grid-template: "hd hd hd" minmax(100px auto) "sb main main" minmax(100px auto) "ft ft ft" minmax(100px auto) / 1fr 1fr 1fr }
使用grid
可同时设置属性:grid-template-rows
、grid-template-columns
、grid-template-areas
、grid-auto-rows
、grid-auto-columns
、grid-auto-flow
;注:此属性会把 grid-gap
值重置为0;
上例可简写:
.header { grid-area: hd } .footer { grid-area: ft } .sidebar { grid-area: sb } .content { grid-area: main } .wrap { display: grid; grid: "hd hd hd" minmax(100px auto) "sb main main" minmax(100px auto) "ft ft ft" minmax(100px auto) / 1fr 1fr 1fr }
grid-template-areas
中留空的单元用句点符'.'占位;
Grid布局轴线对齐
网格布局方式下共有两条轴线用于对齐——块轴(一般垂直方向的)和行轴(内联轴)。块方向的轴是采用块布局时块的排列方向。行轴与块方向的轴垂直,它的方向和常规内联流中的文本方向一致。
对齐元素到块轴的属性是align-items align-self
作用在网格容器上的属性 align-items
的取值有:
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
作用在网格元素上的属性 align-self
的取值同 align-items
对齐元素到行轴的属性是justify-items justify-self
justify-items
作用在网格容器上,justify-self
作用在网格元素上,取指同以上两个属性。
place-items
属性是对 align-items
和 justify-items
的简写。
place-self
属性是对 align-self
和 justify-self
的简写。
对齐网格轨道到块轴的属性是 align-content
作用在网格容器上,其值有:
- normal
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
- baseline
- first baseline
- last baseline
对齐网格轨道到行轴的属性是 justify-content
其属性值同align-content
,space-content
是对 align-content
justify-content
的缩写。
布局示例
- 使元素内容水平、垂直居中
.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; } .item1 { align-self: center; justify-self: center; }
- 使元素在网格容器内水平、垂直居中
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 200px); grid-template-areas: ". . . " ". a . " ". . . "; } .item1 { grid-area: a; }
- 自动填充网格轨道
.wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); }
- 灵活的轨道数量
.wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
以上就是羊了个羊的中强大的Grid布局的详细内容,更多关于羊了个羊 Grid布局的资料请关注我们其它相关文章!