<!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> <link rel="stylesheet" href="../css/girdlayout.css"></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>6</div> <div>7</div> </div></body></html>CSS
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; }