CSS—grid

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>布局</title>
 6 
 7     <style>
 8 
 9         .box{
10 
11             display: grid;
12 
13             grid-template-columns:150px 150px 150px;
14 
15             grid-template-rows: 100px 100px 100px 100px;
16 
17         }
18 
19         .one{
20 
21             background: red;
22             
23             grid-area: 1/1/2/4;
24         
25         }
26 
27         .two{
28 
29             background: orange;
30             
31             grid-area: 2/1/5/2;
32         
33         }
34 
35         .three{
36 
37             background: blue;
38             
39             grid-area: 2/2/3/3;
40         
41         }
42 
43         .four{
44 
45             background: pink;
46             
47             grid-area: 3/2/4/3;
48         
49         }
50 
51         .five{
52 
53             background: yellow;
54             
55             grid-area: 4/2/5/3;
56         
57         }
58 
59         .six{
60 
61             background: green;
62             
63             grid-area: 2/3/5/4;
64         
65         }
66 
67     </style>
68 </head>
69 
70 <body>
71 
72     <div class="box">
73 
74         <div class="one">one</div>
75 
76          <div class="two">two</div>
77 
78         <div class="three">three</div>
79 
80         <div class="four">four</div>
81 
82         <div class="five">five</div>
83 
84         <div class="six">six</div>
85 
86     </div>
87 
88 </body>
89 </html>
代码效果如下：