布局:大屏方案(grid)

一、背景

Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Grid布局远比 Flex布局强大。

每一个方格内放入echarts图表既是大屏效果。本文仅做基础布局,供日后参考。

二、方案

方案一:

布局:大屏方案(grid)_第1张图片




方案二:

布局:大屏方案(grid)_第2张图片




方案三:

布局:大屏方案(grid)_第3张图片




方案四:

布局:大屏方案(grid)_第4张图片




三、欢迎交流指正,关注我,一起学习。

参考链接:

两个大屏可视化案例的布局与实现 - 疯子110 - 博客园

你可能感兴趣的:(前端,前端,grid)