Grid网格布局

最新推荐文章于 2024-06-26 18:58:04 发布

weixin_30861797

最新推荐文章于 2024-06-26 18:58:04 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/ly52990/p/9944205.html

版权

 
   <!DOCTYPE html> 
  
   <html> 
  
   <head> 
  
   <meta charset= 
   "utf-8" 
   > 
  
   <title>网格布局</title> 
  
   <style> 
  
   .container { 
  
   display: grid; 
  
   grid-template-columns: 100px 100px 100px 100px 100px； 
  
   grid-template-rows: 100px 100px 100px 100px 100px; 
  
   } 
  
   .item { 
  
   background-color: #0fc; 
  
   color: #fff; 
  
   font-size: 150%; 
  
   padding: 20px; 
  
   margin: 10px; 
  
   } 
  
   .item-1 { 
  
   grid-column-start: 1; 
  
   grid-column-end: 5; 
  
   grid-row-start: 1; 
  
   grid-row-end: 2; 
  
   } 
  
   .item-2 { 
  
   grid-column-start: 1; 
  
   grid-column-end: 2; 
  
   grid-row-start: 2; 
  
   grid-row-end: 5; 
  
   } 
  
   .item-3 { 
  
   grid-column-start: 2; 
  
   grid-column-end: 4; 
  
   grid-row-start: 2; 
  
   grid-row-end: 3; 
  
   } 
  
   .item-4 { 
  
   grid-column-start: 2; 
  
   grid-column-end: 4; 
  
   grid-row-start: 3; 
  
   grid-row-end: 4; 
  
   } 
  
   .item-5 { 
  
   grid-column-start: 2; 
  
   grid-column-end: 4; 
  
   grid-row-start: 4; 
  
   grid-row-end: 5; 
  
   } 
  
   .item-6 { 
  
   grid-column-start: 4; 
  
   grid-column-end: 5; 
  
   grid-row-start: 2; 
  
   grid-row-end: 5; 
  
   } 
  
   </style> 
  
   </head> 
  
   <body> 
  
   <h1>Grid布局</h1> 
  
   <div  
   class 
   = 
   "container" 
   > 
  
   <div  
   class 
   = 
   "item item-1" 
   >1</div> 
  
   <div  
   class 
   = 
   "item item-2" 
   >2</div> 
  
   <div  
   class 
   = 
   "item item-3" 
   >3</div> 
  
   <div  
   class 
   = 
   "item item-4" 
   >4</div> 
  
   <div  
   class 
   = 
   "item item-5" 
   >5</div> 
  
   <div  
   class 
   = 
   "item item-6" 
   >6</div> 
  
   </body>  
  
   </html>