grid网格布局之骰子案例

上次用的flex布局做的骰子,这次用grid网格布局来做。
点数1—5用3行3列的网格,点数6用3行2列的网格就ok啦
在这里插入图片描述在这里插入图片描述
html:
在这里插入图片描述
css:点数1—5的网格结构都是3行3列的 (红框中的结构相同),再利用grid-area找到指定的位置即可
点数1:
在这里插入图片描述
点数2:
在这里插入图片描述
点数3:
在这里插入图片描述
点数4:
在这里插入图片描述
点数5:
在这里插入图片描述
点数6:3*2的网格
在这里插入图片描述
运行结果:
在这里插入图片描述

发布了16 篇原创文章 · 获赞 12 · 访问量 266

猜你喜欢

转载自blog.csdn.net/WU567_/article/details/105064123