网格布局grid

最新推荐文章于 2025-04-28 09:31:46 发布

weixin_34000916

最新推荐文章于 2025-04-28 09:31:46 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xbsai/p/9853395.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 
 5   <head>
 6 
 7     <meta charset="UTF-8">
 8     <title>practise</title>
 9 
10     <link rel="stylesheet" href="grid.css">
11   </head>
12 
13 
14   <body>
15     <div>
16       <div class="wrapper">
17         <div class="one">1</div>
18         <div class="two">2</div>
19         <div class="three">3</div>
20         <div class="four">4</div>
21         <div class="five">5</div>
22         <div class="six">6</div>
23       </div>
24   </body>
25 
26 
27 </html>

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px 100px;
}

.one {
  background: red;
  grid-area: 1/1/2/4;
}

.two {
  background: blue;
  grid-area: 2/1/5/2;
}

.three {
  background: green;
  grid-area: 2/2/3/3;
}

.four {
  background: black;
  grid-area: 3/2/4/3;
  color: white;
}

.five {
  background: yellow;
  grid-area: 4/2/5/3;
}

.six {
  background: #36c9ba;
  grid-area: 2/3/5/4;
}