移动端直播布局技巧：Grid基础属性与应用.pptx

Grid无忧gridformationcontext

1PARTgrid知识点从此你的布局可以这么玩

基础属性基础属性：display:grid使用grid的基本理念是在一个容器元素身上创建虚拟的网格，子级自动填充网格，所以grid更多的属性都是用在父级容器元素身上

创建单元格创建列：grid-template-columns用于定义每一列的宽度以及列数可能的值：grid-template-columns：100px200px300px；可以给多个值如100px200px300px这里定义了三列宽度分别是100200300grid-template-columns：repeat(4,1fr)；repeat(4,1fr)利用repeat函数来创建多个重复的列第一个值是多少列第二个值是每一列的宽度注：fr是相对单位相当于弹性盒模型里的一份，在这里把父级的宽度分成了4份一个单元格占一份

创建单元格创建行：grid-template-rows用于定义每一行的高度以及行数可能的值：grid-template-rows：100px200px300px；可以给多个值如100px200px300px这里定义了三行高度分别是100200300grid-template-rows:minmax