grid中的属性名称在学习grid标签之前，首先要认识以下属性的含义，以便于学习。容器中的属性grid-template-columnsgrid-template-rows数字百分比fractionfractiongrid-rwo-gapgrid-column-gapgrid-gap（缩写）grid-templete-areasgrid-auto-flow（改变布局方向）justift改变主轴（水平）布局align副轴（垂直）justify-itemsalign-itemsplace-items（缩写）justify-content默认拉伸align-contentplace-content（缩写）grid-auto-columnsgrid-auto-rowsgrid-template-columns设置元素有列，每列的宽度是多少。单位可以用fr(fraction,按比例分配宽度),px固定宽度,%百分比width.grid-template-columns:100px100px100px,定义grid一共3个垂直列，每个垂直宽度为100px.这里为了省事，我们可以用repeat(3,100px)重复3次，每次100px；如果不想数数，也可以使用repeat(auto-fill,100px)自动填充100px。grid-template-rows也是这样理解，只是row定义了高度排。没有设置拉伸的元素默认拉伸平分空白。row-gapcolumn-gaprow-gap和column-gap一开始写的是grid-row-gap/grid-column-gap，后来改成了现在的row-gap/column-gap。它是定义行与列之间的距离。可以简写为gao：columnspacingandrowspacing。如果两个数如果值相同，可以写成.grid-template-area划分区域。划分的时候要注意我们的布局是一个盒子（正方形），所以划分的区域也应该是正方形的区域，否则会造成代码错误。我很想确定grid-auto-flow和flex的方向，并定义排列。水平行和垂直列。但是有更多的属性行密集和列密集。是为了节省页面空间，自动填充。证明合法-
