栅格介绍
后盾人官网:houdunren.com
讲师:@ 向军大叔
名词解释
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。
栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含多个项目元素的使用。
image-20190829232951627
兼容性
下面是栅格系统兼容性数据,所以在根据项目使用的场景决定是否使用栅格布局。
1.png
声明容器
块级容器
image-20190829144825641
后盾人
行级容器
image-20190829144939743
display: inline-grid;
划分行列
栅格有点类似表格,也 行 和 列。使用 grid-template-columns 规则可划分列数,使用 grid-template-rows 划分行数。
固定宽度
下面是使用固定宽度划分两行三列的的示例,当容器宽度过大时将漏白。
image-20190829142948605
…
百分比
可以使用使用百分比自动适就容器。
image-20190829144703978
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 25% 25% 25% 25%;
重复设置
使用 repeat 统一设置值,第一个参数为重复数量,第二个参数是重复值
image-20190829145121820
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);
可以设置多个值来定义重复,下面定义了四列,以 100%、20px 重复排列。
image-20190829145709624
display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);
自动填充
自动填充是根据容器尺寸,自动设置元素尺寸。
image-20190829150350983
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
比例划分
使用 fr 单位设置元素在空间中所占的比例,下面按1份-2份 分成两组共四列。
单位组合
image-20190829151215601
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;
重复定义
image-20190829150823388
width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr 2fr);
组合定义
grid-tempalte 是 grid-template-rows、grid-template-columns、grid-template-areas 的三个属性的简写。
下面是使用 grid-template 同时声明 grid-template-rows、grid-template-columns。
grid-template: 100px 1fr / 50px 1fr
下面是使用grid-template 定义 grid-template-areas ,有关grid-template-areas的使用方法会在下面介绍。
image-20190928152734183
grid-template: “header . .”
“. main .”
“footer footer .”;
minmax
使用 minmax 方法可以设置取值范围,下列在行高在 最小100px ~ 最大1fr 间取值。
image-20190829151644654
width: 300px;
height: 300px;
display: grid;
grid-template-rows: 100px minmax(100px, 1fr);
grid-template-columns: 100px 1fr;
间距定义
行间距
使用 row-gap 设置行间距。
image-20190829152837070
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;
列间距
使用 column-gap 定义列间距。
image-20190829152940142
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
column-gap: 20px;
组合定义
使用 gap 规则可以一次定义行、列间距,如果间距一样可以只设置一个值。
设置行列间距为20px与10px
image-20190829153208166
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
统一设置行列间距为20px
image-20190829153241158
gap: 20px;
栅格命名
栅格线可以使用命名与编号找到,方便控制指定栅格,或将内容添加到指定栅格中。
image-20190829235441431
独立命名
可以为每个栅格独立命名来进行调用。
image-20190830154931726
…
自动命名
对于重复设置的栅格系统会自动命名,使用时使用 c 1、c 2 的方式定位栅格。
image-20190831132454288
…
元素定位
选项 说明
grid-row-start 行开始栅格线
grid-row-end 行结束栅格线
grid-column-start 列开始栅格线
grid-column-end 列结束栅格线
根据栅格线
通过设置具体的第几条栅格线来设置区域位置,设置的数值可以是正数和负数。
image-20190831131522612
…
根据栅格命名
image-20190831131522612
…
根据自动命名
对于重复设置的栅格系统会自动命名,使用时使用 c 1、c 2 的方式定位栅格。
image-20190831132454288
…
根据偏移量
使用 span 可以设置移动单元格数量,数值只能为正数。
[ ] 设置在 grid--end 表示 grid--end 栅格线是从 grid--start 移动几个单元格
[ ] 设置在 grid--start 表示 grid--start 栅格线是从 grid--end 移动几个单元格
为 grid-*-end 设置栅格线
image-20190831171434085
…
简写模式
可以使用 grid-row 设置行开始栅格线,使用 grid-column 设置结束栅格线。
上例中的居中对齐元素,可以使用以下简写的方式声明(推荐)。
grid-row: 2/4;
grid-column: 2/4;
grid-area
grid-area更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。
语法结构如下:
grid-row-start/grid-column-start/grid-row-end/grid-column-end。
下面是将元素定位在中间的示例。
image-20190928153819574
BOOTSTRAP
下面是bootstrap栅格系统的开发,根据指定的样式自动设置栅格大小。
image-20190830124033140
…
元素附加
通过 grid-area 属性可以将元素放在指定区域中。grid-area由grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写模式。
编号附加
下例中将元素放在容器的中心位置中的栅格中。
image-20190830152122321
…
命名附加
同样是上面的例子可以使用栅格线命名来附加元素。
article {
margin: 0 auto;
width: 400px;
height: 400px;
border: solid 5px silver;
display: grid;
grid-template-rows: repeat(auto-fill, [r] 100px);
grid-template-columns: repeat(auto-fill, [l] 100px);
}
article div {
background: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
font-size: 30px;
color: white;
}
article div:first-child {
grid-area: r 2/l 2/r 4/l 4;
}
区域声明
区域是由多个单元格构成,使用 grid-template-areas可以定义栅格区域,并且栅格区域必须是矩形的。
区域布局
下面是使用栅格区域布局移动端页面结构
image-20190829195447976
…
区域命名
系统会为区域自动命名,上例中的会产生 header-start 水平与垂直同名的起始区域与 header-end水平与垂直同名的区域终止。
image-20190830000855557
下面使用区域命名部署的效果
image-20190831222934932
…
区域占位
使用一个或多个 . 定义区域占位。
image-20190829203245181
…
栅格流动
在容器中设置grid-auto-flow 属性可以改变单元流动方式。
选项 说明
column 按列排序
row 按行排列
#基本使用
下例将单元按列排序流动
image-20190830003134787
…
强制填充
当元素在栅格中放不下时,将会发生换行产生留白,使用grid-auto-flow: row dense; 可以执行填充空白区域操作。
image-20190830004630960
…
栅格对齐
可以通过属性方便的定义栅格的对齐方式,可用值包括 start | end | center | stretch | space-between | space-evenly | space-around。
选项 说明 对象
align-items 栅格内所有元素的垂直排列方式 栅格容器
justify-items 栅格内所有元素的横向排列方式 栅格容器
justify-content 所有栅格在容器中的水平对齐方式,容器有额外空间时 栅格容器
align-content 所有栅格在容器中的垂直对齐方式,容器有额外空间时 栅格容器
align-self 元素在栅格中垂直对齐方式 栅格元素
justify-self 元素在栅格中水平对齐方式 栅格元素
image-20190829225727414
平均分布
image-20190829231259807
border: solid 5px silver;
width: 600px;
height: 600px;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
justify-content: space-between;
align-content: space-evenly;
元素对齐
用于控制所有元素的对齐方式
image-20190928161557891
margin: 0 auto;
border: solid 1px silver;
width: 400px;
height: 100px;
display: grid;
grid-template-columns: repeat(4, 100px);
justify-items: center;
align-items: center;
元素独立控制
控制单个元素的对齐方式
image-20190928161449880
div:first-child {
justify-self: end;
align-self: center;
}
div:nth-child(4) {
justify-self: start;
align-self: center;
}
组合简写
place-content
用于控制栅格的对齐方式,语法如下:
place-content:
place-items
控制所有元素的对齐方式,语法结构如下:
place-items:
place-self
控制单个元素的对齐方式
place-self: