Grid 布局
栅格系统 使用栅格系统存在兼容性问题，所以在根据项目的使用场景决定是否使用栅格布局
声明栅格系统的容器
display: grid
绘制栅格
这好吧在一个方框里画线，横横纵纵
grid-template-rows划横线
grid-template-columns划竖线
div{/**容器*/
width:300px;
height:100px;
display:grid;
grid-template-rows:50px 50px ;/*划分为两行，每行高度分别是50px 50px*/
grid-template-columns:70% 30%;/*划分为两列，每列宽度分别占70% 30%*/
}
对于每格宽高都一样的情况，可以简写
repeat
前提是容器内要放上相应数量的盒子
div{
width:500px;
height:300px;
display:grid;
grid-template-rows:repeat(2,100px 150px);
/*分为4行，每行高度分别是 100px 150px 100px 150px*/
grid-template-columns: repeat(5,20%);
/*分为5列，每列宽度占总宽度的20%*/
}
自动填充
auto-fill——写在repeat里的参数
div{
width:300px;
height:100px;
display:grid;
grid-template-rows:repeat(auto-fill, 100px);/*设定好每个宽100px，自动填充格数*/
grid-template-columns:repeat(auto-fill,100px);
}
感悟：自动填充搭配百分比宽高很容易出错，规划不出矩形区域
按份数填充
grid-template-rows: 1fr 2fr 1fr;
把高度平均分成四份，三行分别占1份 2份 1份
grid-template-columns: 1fr 2fr 1fr;
把宽度平均分成四份，三行分别占1份 2份 1份
MINMAX控制尺寸波动范围
grid-template-rows:repeat(2,minmax(50px , 100px))
每一个高度最小值50px最大值100px
栅格间距
row-gap:10px;/*行间距10px*/
column-gap:10px;/*列间距10px*/
/*统一设置*/
gap: 20px 10px; /*行间距 列间距*/
放置元素
根据栅格元素编号放置
对子元素设置放置位置
header{/*容器*/
display:grid;
height:100px;
width:300px;
background-color: yellowgreen;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(3,100px);
}
header div{
box-sizing: border-box;
border:1px black solid;
/*关键字句*/
grid-row-start:2;/*开始行*/
grid-column-start: 1;/*开始列*/
grid-row-end: 2;/*结束行*/
grid-column-end: 3;/*结束列，会在设置的列的前1列结束*/
/*比如这个子盒子里，元素占据父盒子的第2行第1、2列*/
}
最后放置一定是一个矩形
固定命名放置元素
先在对容器画线设置的时候命名
div{
width:300px;
height:300px;
display:grid;
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
}
再放置子元素
div:first-child{
grid-row-start:r1-start;
grid-column-start:c2-start;/*c1-end 相当于 c2-start*/
grid-column-end:c2-end;/*c2-end 相当于 c3-start*/
grid-row-start: r1-end;
}
重复栅格的命名技巧
/*container*/
div {
width:300px;
height:300px;
display:grid;
grid-template-rows: repeate(3,[r-start] 1fr [r-end]);
grid-template-columns: repeate(3, [c-start] 1fr [c-end] );/*每一格的左边那条线是r-start/c-start,右边是r-end/c-end*/
}
/*容器中的子盒子*/
div:first-child{
grid-row-start: r-start 1;
grid-column-start: c-start 1;
grid-row-end: r-end 1;
grid-column-end: c-end 3;
}
根据偏移量定位元素
div:first-child{
grid-row-start: 2;
grid-column-start:2;
grid-column-end: span 2;/*占两格*/
grid-row-end: span 1;/*占一格*/
}
元素定位简写操作
div:first-child{
grid-row: 3/4;/*3开始4结束*/
grid-column: 3/4;/*3开始4结束*/
}
div:first-child{
grid-row: 3/ span 1;/*3开始 占1格*/
grid-column: 1/ span 3; /*1开始 占3格*/
}
使用栅格区域部署元素
div:first-child{
grid-area: 2/2/3/3;
/*分别是grid-row-start/grid-column-start/grid-row-end/grid-column-end*/
}
按盒子顺序定义区域
article{
width:100vw;
height:100vh;
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 60px 1fr;
/*为各个区域命名*/
grid-template-areas: "header header"/*在同一行的格子写在一个引号里*/
"nav main"
"footer footer"
}/*起一样的名字就代表格子合并了*/
/*再往里面装盒子*/
article: first-child{
grid-area: header;/*这样设置就会占到header区*/
}
article:nth-child(2){
grid-area: nav;/*占nav区*/
}
article:nth-child(3){
grid-area: main;/*占main区*/
}
article:nth-child(4){
grid-area: footer;/*占2个footer区*/
}
将栅格命名后，每一条线也就自动获得了名称
div:first-child{
grid-area: header-start/header-start/main-end/main-end;
}
就算不命名，也要打一个点在那里占位 比如
div{
display: grid;
grid-template-areas: ". ."
". ."
"footer footer"/*起同样的名字就代表这两个区域合并了*/
}
栅格系统可以层层划分下去
栅格系统
BOOKSTRAP 类名绑定栅格属性 通过改变元素类型而改变元素位置和大小
栅格流动方向
grid-auto-flow:row;行排列，默认
grid-auto-flow:column;列排列
grid-auto-flow:row-dense;行剩余空间自动填满
div{
display:grid;
grid-auto-flow: row;/*行排列，默认*/
/*grid-auto-flow: column; 列排列*/
}
div{
grid-auto-flow:row dense;/*行剩余空间自动填满*/
}
对齐处理
justify-content这一属性的值于弹性盒模型里的一样
align-content设置竖直空间
article{
/*container*/
border:solid 1px black;
width:400px;
height:100px;
display:grid;
grid-template-columns: repeat(4, 60px);
/*设置容器内元素的对齐方式*/
/*水平*/
justify-content:space-around;/*这些属性与弹性盒模型里面一样，详见弹性盒模型*/
/*垂直*/
align-content:center;
}
栅格宽高小于容器时设置对齐才有用
巧用justify-items
设置好列元素之后
article{
border:solid 1px silver;
width:400px;
height:100px;
display: grid;
grid-template-columns: repeate(4, 100px);
/*调控栅格里的元素*/
/*横向*/
justify-items: start;
/*end / center / stretch*/
/*纵向调节*/
align-items: end;/**start / center/ stretch*/
}
这些设置的前提是栅格内元素没有填充满，如果元素本身的宽高小于栅格，那么stretch的设置没有意义，如果元素宽高等于栅格，那么设置对齐方式也没有意义。
辨析：
justify-content 是操作容器的栅格（当容器有多余空间时）
justify-items 调整操作栅格里的元素
调节单个元素的对齐方式
div: first-child{
/*横向*/
justify-self:end;
/*纵向*/
align-self: center;
}
组合简写栅格对其方式
对容器进行设置
article{
margin: 0 auto;
border: solid 1px silver;
width: 400px;
height:80px;
display: grid;
grid-template-columns: repeat(4,60px);
place-items: start end;/*每个元素对齐到列开始 行结束*/
}
div{
/*container*/
display:grid;
place-items: center center;/*每个元素对齐到行中心，列中心*/
}
对单个元素进行控制
place-self:center end
栅格内元素对于栅格而言，垂直方向中心对齐，水平方向向右对齐
