好用的Grid布局

声明: 父元素定义display:grid；此时为一个grid 布局模式

设置子元素的宽度 grid-template-columns: 1fr 1fr 1fr;（一个fr 代表父元素的1/n 份）设置多列重复repeat（3,1fr）

repeat(auto-fill,100px ) 每一列都设置100px ;多少列呢? 铺满一整行，如果最后显示不完最后一个则换行（此布局可实现响应式布局）

设置auto 可以使内部元素自适应，如果显示不下会自动换行

部分列宽可设置auto，及自适应，如中间自适应，两边固定

设置子元素之间的间距column-gap列间距，row-gap 行间距 ，gap 行与列同时设置

css 代码

html 代码

align-items: center;// 垂直居中

justify-content: center; // 水平居中
注意   /* grid-template-columns: 1fr ; */
需要自己设置子元素的宽高

align-content: center; 设置整体的轨道对齐方式