grid布局-网格与表格的关联及应用

详解

网格：布局有优势，布局与网格类似，淘汰了表格布局性能缺陷。
表格：性能缺陷，表格标签容易10秒钟，页面空白
div布局：块级布局，多个div放同一行，诞生float布局，float布局简单，诞生了position布局（放大缩小可能错位），诞生了inline，float+position+inline称为hack布局。hack布局（竖直方向对齐不容易）
诞生了弹性盒模型（flexbox）（只能针对一个方向自适应），诞生了grid布局（水平，垂直都能自适应）。
grid布局优势:
固定或弹性的轨道尺寸（对水平或垂直方向做到自适应、响应）
定位项目（网页上的每一块都可以看作一个项目，每个项目都可以定位到想要的地方上去 ）
创建额外的轨道来保存内容（）
对齐控制（跟flexbox布局有一定的相似性）
控制重叠内容（z-index）
grid vs flexbox
flexbox是一维布局，只能在一条直线上放置内容区块。（只能在主轴设置，交叉轴设置整体）
grid是一个二维布局，根据设计需求将内容区块放置到任何地方。
grid 和flexbox可以很好的配合使用（grid做一个整体布局，flex做一个局部布局）不是取代。