欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

2分钟让你搞懂 grid-template-areas

发布时间：2024/3/26 编程问答 57 豆豆
生活随笔 收集整理的这篇文章主要介绍了 2分钟让你搞懂 grid-template-areas 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

上面的效果怎么样通过grid实现呢？ 话不多说 上代码

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>.container {display: grid;width: calc(5 * 60px);height: calc(5 * 60px);padding: 60px;grid-template-rows: repeat(5, 60px);grid-template-columns: repeat(5, 60px);grid-template-areas: ". red red red . ""yellow . . . . ""green . black black . ""green . . . blue "". pink pink pink . ";}.red {grid-area: red;background: red;}.yellow {grid-area: yellow;background: yellow;}.green {grid-area: green;background: green;}.pink {grid-area: pink;background: pink;}.blue {grid-area: blue;background: blue;}.black {grid-area: black;background: black;} </style><body><div class="container"><div class="red"></div><div class="yellow"></div><div class="green"></div><div class="pink"></div><div class="blue"></div><div class="black"></div></div> </body></html>

总结

以上是生活随笔为你收集整理的2分钟让你搞懂 grid-template-areas的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。