2分钟让你搞懂 grid-template-areas
生活随笔
收集整理的這篇文章主要介紹了
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [ 笔记 ] 计算机网络安全_7_虚拟专
- 下一篇： Infiniband