网格布局汇总行语法区语法划分区显示：grid;grid-template-rows:100px100px100px;grid-template-columns:100px100px100px;grid-template-rows:repeat(3,100px);//3100pxgrid-template-rows:repeat(3,100px50px);//100px50px备用网格模板行：repeat(auto-fill,100px);//grid-template-columns按照100px进行划分和填充：1fr1fr1fr;网格模板列：重复（3、1fr）；网格模板列：60px1fr60px；网格模板列：20%20%；间隙行间隙：10px；//行间距10pxcolumn-gap:10px;//列间距10pxgap:20px10px;//控制行列间距，前行后列线控制元素位置grid-row-start:1;网格列开始：1；网格行尾：2；网格行尾：4；将该行命名为grid-template-rows:[r1-start]100px[r1-endr2-start]100px[r2-end];div:first-child{grid-row-start:r1-start;网格列开始：c1-start；网格行端：r1-end；grid-column-end:c1-end;}grid-template-rows:repeat(3,[r-start]1fr[r-结束]);网格模板列：重复（3，[c-start]1fr[c-end]）；div{grid-row-start:r-start1;grid-column-start:c-start1;}定义span.col-7{grid-column-end:span7;}通过区域控制位置div:first-child{grid-area:1/1/4/4;//Startrow/startcolumn/endrow/endcolumn}别名具有相同名称的区域并自动合并到one.contain{grid-template-areas:"headerheader""navmain""footerfooter";}!--使用-->header{grid-area:header;}区域命名缩写.con{网格模板区域：“..”“……”“页脚页脚”;}alignment.item{justify-items:center;对齐项目：结束；place-items:centerend;证明内容：空间均匀；对齐内容：居中；place-content:centerspace-evenly;}div:nth-child(4){justify-self:start;对齐自我：中心；place-self:centerstart;}终于搞清楚justify-content、justify-ite这三个的区别女士，自我辩护；前两个是盒子的属性，最后一个是盒子里面元素的属性。justify-content可以理解为在水平方向切几刀，控制垂直内容的位置align-content可以理解为垂直切几刀，控制水平内容的位置逐一表示元素在被最大容器切割的小容器中的位置-self表示在最大容器中切割的单独控件元素在小容器中位置的综合案例1..con>.item>.icon-item>.icon>img^span.con{显示：网格；宽度：100%；高度：210px；背景色：#ccc；网格模板列：重复（4、1fr）；间隙：20px；对齐内容：居中；}.item{border:1pxsolid#000;框大小：边框框；高度：160px；-child{显示：网格；网格模板列：重复（3、1fr）；网格模板行：重复（2、1fr）；}.item.icon-item{border:1pxsolid#000;显示：网格；对齐内容：居中；证明内容：居中；对齐项目：居中；证明项目：中心；间隙：8px；{宽度：100%；高度：100%；}加强-content、-items之间的使用；实现如下效果方法1:.con{显示：网格；宽度：100%；高度：620px；背景色：#ccc；网格模板列：重复（5、1fr）；网格模板行：重复（2，1fr）；间隙：20px；对齐内容：居中；网格模板区域：“导航……”“导航……”}.item{border:1pxsolid#000;框大小：边框框；}.item:first-child{显示：网格；网格区域：导航；background-color:#fff;}方法二：.con{display:grid;宽度：100%；高度：620px；网格模板列：重复（5、1fr）；网格模板行：重复（2、1fr）；间隙：20px；align-content:center;}.item:first-child{显示：网格；grid-area:1/1/3/2;}高级使用封装对应类，直接写类名即可实现所有布局类名。命名类名的方式是attribute-value的形式，方便阅读，也实现了上面的例子
