Grid布局笔记

grid布局含义

也称网格布局

触发网格：display:grid（块级元素）/inline-grid(行内块)

grid与flex：
都存在容器和项目
flex为一维布局，轴线布局
grid为二维布局，有行和列区分

划分行列

数字：grid-template-rows:100px 100px 100px(每行高度)
百分比：grid-template-columns:20% 30% 50%(每列宽度，占据父盒子)
重复函数：grid-template-rows:repeat(num1 num2) (num1为重复个数，num2为重复的数值，即百分比或数值)
//num1为auto-fill时，自动按照num2填充个数，空隙不足时不再填充
grid-template-rows:100px auto 100px(auto为占满剩余)
fr片段划分：1fr 2fr 3fr(表示比例，份数)
minmax函数：grid-template-rows：
200px 200px minmax（num1 num2）
num1为最小值，num2为最大值 ，表示条件允许时一直最大值，不满足则用中间值，剩余部分用最小值补全

调整间距

grid-row-gap：20px
grid-column-gap：20px
//grid-gap：20px 20px（分别代表行间距和列间距）

调整显示顺序

grid-auto-flow:row(默认)
grid-auto-flow:column（竖着排序）

项目对齐方式

水平方向：justify-items:start/center/end
垂直方向:   align-items:start/center/end
复合属性：place-item：align-items justfy-items
//默认情况下项目居单元格左上                     

单元格对齐方式

justify-content:start/center/end
align-content:start/center/end
palce-content:center（竖直） center（水平）
justify-content:space-between(两边贴边，自动拉开)
justify-content:space-evenly（间距平分）
justify-content:space(padding)

合并单元格属性

（竖直）grid-column-start: 1(表示网格线的位置)
grid-column-end:
（水平）grid-row-start:
grid-row-end：
grid-row：1/3（表示水平1-3）
//合并完后会有单元格溢出，注视掉即可