grid
原生CSS Grid
在最新的Web标准中,加入了原生的CSS Gird 盒子模型, 从而支持盒子内部采用栅格方式定位,即多条坐标轴线,可以在最新的浏览器里体验
CSS Grid示例
Export
HTML
Result
可在 https://caniuse.com 搜索 'css grid' 可以查看各浏览器的实现情况
各种布局技术的简单比较
特征 | 浮动 | Flex | CSS Grid |
---|---|---|---|
功能 | 基于定位 | 基于十字轴线 | 基于二维网格线 |
兼容性 | 最好 | 较好,尤其移动设备 | 较差 |
复杂性 | 基于各种技巧 | 简单易用 | 较复杂 |