网格布局之grid

时间：2018-10-17 00:29:04 阅读：175 评论：0 收藏：0 [点我收藏+]

标签：one 布局 seve ack repeat content display title red

 1 <!DOCTYPE HTML>
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6     <title>
 7         网格布局
 8     </title>
 9     <link rel="stylesheet"  href="网格布局.css">
10 
11 </head>
12 <body>
13 <div class="wrapper">
14   <div class="one">One</div>
15   <div class="two">Two</div>
16   <div class="three">Three</div>
17   <div class="four">four</div>
18   <div class="five">Five</div>
19   <div class="six">Six</div>
20   <div class="seven">Seven</div>
21   <div class="eight">Eight</div>
22   <div class="nine">Nine</div>
23 </div>
24 </body>
25 </html>

.wrapper{
    display: grid;
  grid-template-columns: repeat(4,100px);
   /* grid-gap: 10px;*/
  grid-auto-rows: 100px;
}


.one{
  display: inline-block;
    width: 500px;
    height: 100px;
    background: red;
    color:black;
     grid-column: 1 / span 4;
     grid-row: 1 / 2;   
}
.two{
  display: inline-block;
    width: 100px;
    height: 200px;
    background: yellow;
    color:black;
     grid-column: 1 / 2;
     grid-row: 2 / 3;   
}

.three{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: yellow;
    color:black;
     grid-column: 2 / 3;
     grid-row: 2 / 3;   
}
.four{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: green;
    color:black;
     grid-column: 3 / 4;
     grid-row: 2 / 3;   
}
.five{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: pink;
    color:black;
     grid-column: 4 / 5;
     grid-row: 2 / 3;   
}
.six{
  display: inline-block;
    width: 100px;
    height: 200px;
    background: lime;
    color:black;
     grid-column: 5 / 6;
     grid-row: 2 / 3;   
}
.seven{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
    color:black;
     grid-column: 2 / 3;
     grid-row: 3 / 4;   
}
.eight{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: purple;
    color:black;
     grid-column: 3 / 4;
     grid-row: 3 / 4;   
}
.nine{
  display: inline-block;
    width: 100px;
    height: 100px;
    background: seagreen;
    color:black;
     grid-column: 4 / 5;
     grid-row: 3 / 4;   
}

网格布局之grid

标签：one 布局 seve ack repeat content display title red

原文地址：https://www.cnblogs.com/erxiaojiedeah/p/9800780.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行