CSS Grid布局详解与应用.pptx

grid网格布局讲师：董美琪

笔记：

术语1.容器和项目容器：设置display：grid/inline-grid的元素（区别在于会不会独占一行）项目：其下的子元素2.行和列行：容器内水平区域为行列：容器内垂直区域为列3.单元格行和列的交叉区域4.网格线：划分网格的线，水平划分出行，竖直划分出列

grid容器属性1.display:grid/inline-grid;2.grid-template-columns；定义每一列的列宽3.grid-template-rows;定义每一行的行高4.grid-template-areas;定义网格区域5.grid-row-gap;行与行之间的缝隙6.grid-column-gap;列与列之间的缝隙7.align-items每个单元格内部的垂直对其方式---项目相对于单元格的8.align-content子元素整体的垂直对齐方式整个单元格相对于容器9.justify-content子元素整体的水平对齐方式10.justify-items每个单元格内部水平对齐方式11.place-content子元素整体的水平垂直对齐方式align-contentjustify-content12.place-items每个单元格内部的水平垂直对齐方式align-items