<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grid</title> <style> h1{display: block;text-align:center;} hr{color: blue; font-size: 12px;} * {box-sizing: border-box;} .main { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .main > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: blue; padding: 1em; color: red; } .main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; } </style> </head> <body> <h1>这是一个关于gridLayout的小例子</h1> <hr> <div class="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>