grid布局
grid布局与flex布局的区别grid创建单元格单元格合并单元格对齐方式
grid布局与flex布局的区别
flex用于小型布局，grid用于大型布局
grid创建单元格
grid-template-rows --------- 分行grid-template-columns ---- 分列关键词 repeat 重复关键词 1fr 一份关键词 auto-fill 等分
grid-template-columns: 60px 60px 60px 60px 60px 60px 60px
;
grid-template-columns: repeat(7,60px
);
grid-template-columns: 200px 40% 100px
;
grid-template-columns: 1fr 1fr 1fr 1fr
;
grid-template-columns: 200px 1fr 2fr 1fr 1fr
;
grid-template-columns: 200px 1fr
;
grid-template-columns: repeat(auto-fill,200px
);
单元格合并
轨道线：比如：三个单元格有四条轨道线。合并即为修改轨道线位置合并行： grid-row-start ----行轨道线开始位置 grid-row-end -----行轨道线结束位置 grid-row -----------复合样式，起始位置/结束位置和并列： grid-column-start ----列轨道线开始位置 grid-column-end -----列轨道线结束位置 grid-column -----------复合样式，起始位置/结束位置移动：修改轨道线位置命名方式合并单元格： grid-template-areas：随意起名，依次对应每个单元格，命名一致的代表合并了 grid-area:：子元素使用时，直接取上诉名字
.box1:nth-child(1){
grid-row-start: 1
;
grid-row-end: 4
;
grid-row: 1/4
;
}
.box2{
grid-template-areas：
'a a a d'
'e f g h'
'h i j k'
}
.box2:nth-child(1){
grid-area: a
;
}
单元格对齐方式
针对单个元素对齐：items
justify-items 调整子元素水平方向的对齐方式
align-items 调整子元素竖直方向的对齐方式
单元素对齐的值 center 居中
start 前面
end 后面
多个元素对齐：content
justify-content 调整多个子元素水平方向的对齐方式
align-content 调整多个子元素竖直方向的对齐方式
多元素对齐的值 center
start
end
4
) space-around 每个元素间隔距离都是相同的，离边框一小段距离
5
) space-between 每个元素间隔距离都是相同的，贴边框
6
) space-evenly 每个元素间隔距离都是相同的，离边框稍大段距离
grid-gap ：盒子间距（第一个值，行与行的间距，第二个值，列与列的间距。只有一个值：行与列共同的间距）
grid-auto-flow ：定义盒子排列顺序 默认：row 横向排列
column 纵向排列
