首页 > 代码库 > CSS Grid layout布局
CSS Grid layout布局
CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。你只需要定义一个容器元素并设置display：grid，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小，然后使用grid-column 和 grid-row属性将其子元素放入网格之中。目前还处于 W3C 的工作草案之中，并且默认情况下，还不被所有的浏览器所支持。出于示例演示，建议你使用启用了特殊标志的 Chrome, Opera 或者 Firefox，现在介绍chrome浏览器开启示例功能；
可以直接在浏览器地址栏中输入网址：chrome://flags#enable-experimental-web-platform-features 立马定位需要的选项，然后点击“启用”(enable)按钮，然后重启浏览器即可。如下图：
下面是一个Grid布局的示例源码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <style> 7 * {margin: 0;padding: 0;} 8 html,body {width: 100%;height: 100%;} 9 .container { 10 display: grid; 11 grid-template-columns: 33.333333% 33.333333% 33.333333%; 12 grid-template-rows: auto; 13 } 14 .item { 15 background-color: #444; 16 color: #fff; 17 font-size: 150%; 18 padding: 20px; 19 margin: 3.333333%; 20 } 21 .item-5 { 22 grid-column-start: 2; 23 grid-column-end: 4; 24 grid-row-start: 2; 25 grid-row-end: 4; 26 } 27 .item-7 { 28 grid-column-start: 1; 29 grid-column-end: 3; 30 grid-row-start: 4; 31 grid-row-end: 4; 32 } 33 .item-12 { 34 grid-column-start: 1; 35 grid-column-end: 4; 36 grid-row-start: 6; 37 grid-row-end: 6; 38 } 39 </style> 40 </head> 41 <body> 42 43 <div class="container"> 44 <div class="item item-1">1</div> 45 <div class="item item-2">2</div> 46 <div class="item item-3">3</div> 47 <div class="item item-4">4</div> 48 <div class="item item-5">5</div> 49 <div class="item item-6">6</div> 50 <div class="item item-7">7</div> 51 <div class="item item-8">8</div> 52 <div class="item item-9">9</div> 53 <div class="item item-10">10</div> 54 <div class="item item-11">11</div> 55 <div class="item item-12">12</div> 56 </div> 57 58 </body> 59 </html>
预览效果如下：
CSS Grid layout布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。