Grid网格布局
背景：接了个物联网的项目，自己写前端，布局就采用了Grid布局。
简单的Grid
.container-r-btm { display: grid; /* grid-template-columns: repeat(auto-fill, 160px); grid-template-rows: repeat(auto-fill, 160px); */ grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(auto-fill, 160px); grid-gap: 10px; /* gir */ min-height: 200px; background-color: rgba(240, 240, 240, 0.3); padding: 20px; } 复制代码CSS样式效果
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .main { width: 94vw; min-height: 100vh; margin: 0 auto; background-color: snow; } .main-title { height: 60px; line-height: 60px; font-weight: normal; } .container { width: 100%; height: 100%; border: 1px solid #e5e5e5; display: flex; } .container-l { width: 300px; min-height: 200px; padding-left: 20px; padding-top: 20px; background-color: #fff; } .container-l .container-l-title { display: flex; align-items: center; margin-bottom: 12px; } .container-l .container-l-title img { width: 40px; height: 40px; margin-right: 10px; } .container-l .container-l-title p { font-size: 36px; color: blue; font-weight: bold; } .l-items { padding: 10px; } .container-r { padding-top: 20px; background-color: #fff; min-height: 200px; flex: 1; } .container-r-btm { display: grid; /* grid-template-columns: repeat(auto-fill, 160px); grid-template-rows: repeat(auto-fill, 160px); */ grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(auto-fill, 160px); grid-gap: 10px; /* gir */ min-height: 200px; background-color: rgba(240, 240, 240, 0.3); padding: 20px; } .box-items { /* width: 140px; height: 140px; */ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; } .box-items img { width: 40px; height: 40px; } .box-items p { margin-bottom: 12px; } </style> </head> <body> <div class="main"> <h2 class="main-title">实时数据</h2> <div class="container"> <div class="container-l"> <div class="container-l-title"> <img src="./src/img/haha.png" alt=""> <p>RANK</p> </div> <p class="l-items">实时数据</p> <p class="l-items">实时数据</p> </div> <div class="container-r"> <div class="container-r-top"> <p>实时数据</p> </div> <div class="container-r-btm"> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> <div class="box-items"> <p>30</p> <p>温度C</p> <img src="./src/img/haha.png" alt=""> </div> </div> </div> </div> </div> </body> </html>
作者：阿九筒的春天
链接：https://juejin.cn/post/7022941119214256165