网格布局之网格容器display: grid
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-网格布局之网格容器display: grid</title> <style> .container{ display: grid; color: #f0f0f3; } .item { display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: .2rem; font-size: .8em; min-height: 3rem; padding: .75rem; background-color: #e91e63; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body> </html>
运行结果
三十课