定义网格间隙测试1
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-网格布局之定义网格间隙测试1</title> <style> .container{ display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 20px; grid-column-gap: 5rem; } .item { display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: .2rem; font-size: .8em; min-height: 3rem; padding: .75rem; color: #f0f0f3; background-color: #e91e63; } body { font-family: -apple-system,BlinkMacSystemFont,SFNSDisplay-Regular,Roboto,Helvetica,Arial,sans-serif; line-height: 1.15; } </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>
运行结果
三十课