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)
//合并完后会有单元格溢出,注视掉即可