前端-Grid布局学习

grid布局：网格布局

display:grid

grid-template-columns和grid-template-rows

grid-template-columns: 1px  1px   1px; //指定列数，设置每列宽度   
grid-template-columns: 1fr  1fr   1fr;(设置列平均分配父元素的宽度 )

grid-template-columns:repeat(auto-fill, 150px)
尽量让元素分配往上挪,会自动填充上来，而且他是动态的，会随着父元素宽度改变而改变
grid-template-columns:repeat(auto-fill, minmax(150px,1fr))
随着宽度变化，这个块的大小也会跟着改变
grid-template-rows: 50px 100px 200px  
设置行高
grid-template-rows:repeat(100,50px)  
设置100行统一变成50px

grid-auto-rows:auto; /100px
auto就是元素本身高度，100px设置没有设置行高的为100px
优先级：grid-template-rows > grid-auto-rows:auto
column-gap:
列边距
row-gap:
行边距
grid-template-areas： “header header header”
“sidebar content content”
“footer footer footer”
同时给对应元素设置
header {
grid-area：header;
}
排列元素
align-items: center/end
垂直对齐
justify-items:center/end(右) space-between
水平对齐