首先我们常用的Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。
就像一个格子一个格子的排列，更加灵活，更加强大
利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!
有自己的一套属性, 效率高, 学习成本低, 兼容性强!
网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
上面代码中，最外层的元素就是容器，内层的三个元素就是项目。
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，行和列会产生个单元格。比如，3行3列会产生9个单元格。
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，行有根水平网格线，列有根垂直网格线，比如三行就有四根水平网格线。
指定一个容器采用网格布局。
容器指定了网格布局以后，接着就要划分行和列。属性定义每一列的列宽，属性定义每一行的行高。
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用关键字表示自动填充。
属性设置行与行的间隔（行间距），属性设置列与列的间隔（列间距）。
属性是和的合并简写形式
属性设置单元格内容的水平位置（左中右），属性设置单元格内容的垂直位置（上中下）。
属性是整个内容区域在容器里面的水平位置（左中右），属性是整个内容区域的垂直位置（上中下）
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/23783.html