Grid布局指南
rjma2979
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/b5bc5b1ef28ead7ab0e7c4d97d75f0c3.jpg"></p> <p><strong>简介</strong></p> <p>CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了 flexbox(盒子布局) ，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块,2012年11月06日成立 草案 。</p> <p><strong>初步了解和浏览器支持</strong></p> <p>使用Grid布局非常简单，你只需要给容器（container）定义：display:grid，并设置列（grid-template-columns）和 行（grid-template-rows）的大小，然后用grid-column和grid-row定义容器子元素（grid-item项目）的位置。与flexbox布局类似，一开始项目的排列顺序并不重要，可以放置在容器的任何位置，这也使得你非常容易通过媒体查询重新排列你的项目。想象一下，当你定义整个页面的布局时，你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度，这得有多么神奇！</p> <p>好东西总是来的晚，不要焦躁，不要沮丧。活好每一天，自然就等到了。</p> <p>目前浏览器还不支持Grid布局，IE10和IE11支持老的语法。如果你想体验Grid布局的强大，推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox， Chrome:打开浏览器，输入chrome://flags，找到"experimental web platform features"，启用并重启浏览器；Opera：输入opera://flags，与Chrome一样；Firefox:输入layout.css.grid.enabled。</p> <p>浏览器支持情况：</p> <table> <thead> <tr> <th>Chrome</th> <th>Safari</th> <th>Firefox</th> <th>Opera</th> <th>IE</th> <th>Android/iOS</th> </tr> </thead> <tbody> <tr> <td>29+ (Behind flag)</td> <td>Not supported</td> <td>40+ (Behind flag)</td> <td>28+ (Behind flag)</td> <td>10+ (Old syntax)</td> <td>Not supported</td> </tr> </tbody> </table> <p><strong>重要术语</strong></p> <p>在深入了解Grid布局概念之前，我们先了解一些术语。因为这些术语在概念上很相似，如果你不记住Grid定义的含义，会很容易将它们混淆，但是不用担心，这里术语很少。</p> <p>1.网格容器（Grid Container）</p> <p>元素应用display:grid，它是其所有网格项的父元素。下面例子container就是网格容器。</p> <pre> <code class="language-css"><div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div></code></pre> <p>2.网格项（Grid Item）</p> <p>网格容器的子元素，下面的item元素是网格项，但sub-item不是。</p> <pre> <code class="language-css"><div class="container"> <div class="item"></div> <div class="item"> <p class="sub-item"></p> </div> <div class="item"></div> </div></code></pre> <p>3.网格线（Grid Line）</p> <p>组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并且居于行或列的任意一侧，下面黄色线就是列网格线。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/df70da419aef9e7b3c3315d6f6e0c5da.png"></p> <p style="text-align:center">grid lines</p> <p>4.网格轨道（Grid Track）</p> <p>两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/afdb90fe7ec9be672cb5e7f84ff149da.png"></p> <p style="text-align:center">Grid Track</p> <p>5.网格单元（Grid Cell）</p> <p>两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。下面行网格线1（row grid lines 1）、行网格线2（row grid lines 2）和列网格线1（column grid lines 1）、列网格线2（column grid lines2）组成的黄色区域为网格单元。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9ce6aeb535fecd4fbf754a843ef8cec2.png"></p> <p style="text-align:center">Grid Cell</p> <p>6.网格区（Grid Area）</p> <p>网格区是由任意数量网格单元组成，下面行网格线1（row grid lines 1）、行网格线3（row grid lines 3）和列网格线1（column grid lines 1）、列网格线3（column grid lines3）组成的黄色区域为网格区。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4f426be7d8f6b4138562016a40440921.png"></p> <p style="text-align:center">Grid Area</p> <p><strong>设置在网格容器上的属性</strong></p> <ul> <li>display</li> <li>grid-template-columns</li> <li>grid-template-rows</li> <li>grid-template-areas</li> <li>grid-column-gap</li> <li>grid-row-gap</li> <li>grid-gap</li> <li>justify-items</li> <li>align-items</li> <li>justify-content</li> <li>align-content</li> <li>grid-auto-columns</li> <li>grid-auto-rows</li> <li>grid-auto-flow</li> <li>grid</li> </ul> <p>1. display: grid | inline-grid | subgrid;</p> <p>属性值：</p> <p>grid: 生成块级网格</p> <p>inline-grid: 生成行内网格</p> <p>subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。</p> <p>注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。</p> <p>2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;</p> <p>grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;</p> <p>设置行和列的大小，在行轨道或列轨道两边是网格线。</p> <p>属性值：</p> <p>track-size: 轨道大小，可以使用css长度，百分比或用分数（用fr单位）。</p> <p>line-name: 网格线名字，你可以选择任何名字。</p> <p>例子：</p> <p>当你设置行或列大小为auto时，网格会自动分配空间和网格线名称。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/a2584eed913a3a56fd42624c960b514b.png"></p> <p style="text-align:center">grid-numbers</p> <p>你也可以给网格线定义名字，注意名字需要写在[]里面。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d08481a918a36af283cc9754a5eeb003.png"></p> <p style="text-align:center">grid-names</p> <p>每条网格线可以有多个名字，例如上面行的第二条线有两个名字，分别是row1-end和row2-start。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }</code></pre> <p>如果你定义包含重复部分，可以使用repeat()简化。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: repeat(3, 20px [col-start]) 5%; }</code></pre> <p>上面等同于下面：</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%; }</code></pre> <p>用fr单位可以将容器分为几等份，例如下面分成三等份。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 1fr 1fr 1fr; }</code></pre> <p>如果fr单位和实际值一起使用，设置fr的行或列将分(除了实际值)剩余部分。</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 1fr 50px 1fr 1fr; }</code></pre> <p>3.grid-template-areas</p> <p>通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。</p> <p>属性值：</p> <p>grid-area-name: 网格项的grid-area属性值（名字）</p> <p>‘.’ : 空网格单元</p> <p>none: 不定义网格区域</p> <pre> <code class="language-css">.item-a{ grid-area: header; } .item-b{ grid-area: main; } .item-c{ grid-area: sidebar; } .item-d{ grid-area: footer; } .container{ display:grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" }</code></pre> <p>上面代码示例会创建四列三行网格，第一行将是header，第二行前两个网格单元是main部分、第三个为空网格单元、第四个为sliderbar，第三行是footer。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fc0a114d7e698e5d231a5c976399c48b.png"></p> <p style="text-align:center">grid-template-areas</p> <p>4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;</p> <p>网格单元间距。</p> <p>属性值：</p> <p>line-size: 网格线间距,设置单位值。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/6edb3ed58b9ae0997296383039b6cadf.png"></p> <p style="text-align:center">grid-column-row-gap</p> <p>注：间隔仅仅作用在网格单元之间，不作用在容器边缘。</p> <p>5. grid-gap：<grid-column-gap> <grid-row-gap>;</p> <p>是grid-column-gap 和 grid-row-gap简写。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-gap: 10px 15px; }</code></pre> <p>注：如果只设置一个值，那么grid-column-gap 和 grid-row-gap都为那个值。</p> <p>6. justify-items: start | end | center | stretch（默认） ;</p> <p>垂直于列网格线对齐，适用于网格容器里的所有网格项。</p> <p>属性值：</p> <p>start: 左对齐。</p> <p>end: 右对齐。</p> <p>center: 居中对齐。</p> <p>stretch: 填满（默认）。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; justify-items: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/b534f0d61bc096d4ee73927ec928b74b.png"></p> <p style="text-align:center">grid-justify-items-start</p> <pre> <code class="language-css">.container{ display:grid; justify-items: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/9ce6aeb535fecd4fbf754a843ef8cec2.png"></p> <p style="text-align:center">grid-justify-items-end</p> <pre> <code class="language-css">.container{ display:grid; justify-items: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/dfb32a8985e7fb64351898e4c8b6cdcc.png"></p> <p style="text-align:center">grid-justify-items-center</p> <pre> <code class="language-css">.container{ display:grid; justify-items: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3d0368c79a2b4b82c9b6a65be066e251.png"></p> <p style="text-align:center">grid-justify-items-stretch</p> <p>7. align-items: start | end | center | stretch ;</p> <p>垂直于行网格线对齐，适用于网格容器里的所有网格项。</p> <p>属性值：</p> <p>start： 顶部对齐。</p> <p>end： 底部对齐。</p> <p>center： 居中对齐。</p> <p>stretch：填满（默认）。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; align-items: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d0b04fbe7a410b6d17acd72e5b940a4e.png"></p> <p style="text-align:center">grid-align-items-start</p> <pre> <code class="language-css">.container{ display:grid; align-items: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/c33a15ab20f8f733235797ea5f8e801d.png"></p> <p style="text-align:center">grid-align-items-end</p> <pre> <code class="language-css">.container{ display:grid; align-items: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/c5fda19e9e1f32b77d573d04036e4aa2.png"></p> <p style="text-align:center">grid-align-items-center</p> <pre> <code class="language-css">.container{ display:grid; align-items: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3d0368c79a2b4b82c9b6a65be066e251.png"></p> <p style="text-align:center">grid-align-items-stretch</p> <p>8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;</p> <p>如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。</p> <p>属性值：</p> <p>start: 左对齐。</p> <p>end: 右对齐。</p> <p>center: 居中对齐。</p> <p>stretch: 填满网格容器。</p> <p>space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。</p> <p>space-between: 两边对齐，网格项之间间隔相等。</p> <p>space-evenly: 网格项间隔相等。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; justify-content: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f7fa829e156aa65a30d61c747498f1ef.png"></p> <p>grid-justify-content-start</p> <pre> <code class="language-css">.container{ display:grid; justify-content: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/9a311336e6a18607ad64eaab21ad3e42.png"></p> <p style="text-align:center">grid-justify-content-end</p> <pre> <code class="language-css">.container{ display:grid; justify-content: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e4600670d010a21bad8e3a02f1c983db.png"></p> <p style="text-align:center">grid-justify-content-center</p> <pre> <code class="language-css">.container{ display:grid; justify-content: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1f88e7ed0fe41315f9ea0659f0cd7215.png"></p> <p style="text-align:center">grid-justify-content-stretch</p> <pre> <code class="language-css">.container{ display:grid; justify-content: space-around; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3b86fdb0e25e0bdc6ec3489f495da567.png"></p> <p style="text-align:center">grid-justify-content-space-around</p> <pre> <code class="language-css">.container{ display:grid; justify-content: space-between; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/afb7cadb9b9dff6ecdf0e011c1824244.png"></p> <p style="text-align:center">grid-justify-content-space-between</p> <pre> <code class="language-css">.container{ display:grid; justify-content: space-evenly; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1c59ad0084e1aee5a245416f19a0d658.png"></p> <p style="text-align:center">grid-justify-content-space-evenly</p> <p>9. align-content: start | end | center | stretch | space-around | space-between | space-evenly ;</p> <p>如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。</p> <p>属性值：</p> <p>start: 顶部对齐。</p> <p>end: 底部对齐。</p> <p>center: 居中对齐。</p> <p>stretch: 填满网格容器。</p> <p>space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。</p> <p>space-between: 两边对齐，网格项之间间隔相等。</p> <p>space-evenly: 网格项间隔相等。</p> <p>例子：</p> <pre> <code class="language-css">.container{ display:grid; align-content: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e28df0d7e14e12bdfbf2e3e48680996f.png"></p> <p style="text-align:center">grid-align-content-start</p> <pre> <code class="language-css">.container{ display:grid; align-content: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/33207e598006fb09977ce5c83fc5df72.png"></p> <p style="text-align:center">grid-align-content-end</p> <pre> <code class="language-css">.container{ display:grid; align-content: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e2a45b761ffebd9e0da3f0b98a21c18.png"></p> <p style="text-align:center">grid-align-content-center</p> <pre> <code class="language-css">.container{ display:grid; align-content: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f995be4428e49f66a9c4455aff7e8111.png"></p> <p style="text-align:center">grid-align-content-stretch</p> <pre> <code class="language-css">.container{ display:grid; align-content: space-around; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/0b002e13b9bfc04642c818d7a91adb6f.png"></p> <p style="text-align:center">grid-align-content-space-around</p> <pre> <code class="language-css">.container{ display:grid; align-content: space-between; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/dc4b8fc3f1845a4b578d8191347fcac0.png"></p> <p style="text-align:center">grid-align-content-space-between</p> <pre> <code class="language-css">.container{ display:grid; align-content: space-evenly; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f18580eaf06633de75642a3675592606.png"></p> <p style="text-align:center">grid-align-content-space-evenly</p> <p>10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;</p> <p>自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。</p> <p>属性值：</p> <p>track-size: 网格轨道大小,可以是固定值，百分比或者是分数（fr单位）。</p> <p>为了说明隐式网格轨道是怎么创建的，我们先看下面列子：</p> <pre> <code class="language-css">.container{ display:grid; grid-template-columns: 60px 60px; grid-template-rows: 90px 90px }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/c65d002c9162d0cde40fd6ab8aecd8ec.png"></p> <p style="text-align:center">grid-auto</p> <p>这是2:heavy_multiplication_x:2的网格，但是我们来用grid-column 和 grid-row给网格项定位如下：</p> <pre> <code class="language-css">.item-a{ grid-column: 1 / 2; grid-row: 2 / 3; } .item-b{ grid-column: 5 / 6; grid-row: 2 / 3; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/ef781f8cf12fca5ed8927824feea7d62.png"></p> <p style="text-align:center">implicit-tracks</p> <p>我们可以看出，网格项item-b定位在第五根列网格线（column line 5 ）和第六根列网格线（column line 6 ）之间。但是我们网格容器根本不存在这两条网格线，所以就用两个0宽度来填充。在这里我们可以用网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）来定义这些隐式轨道宽度。</p> <pre> <code class="language-css">.container{ display:grid; grid-auto-columns: 60px; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3ea78da3fc1e351734c021dc2f90c1e3.png"></p> <p style="text-align:center">implicit-tracks-with-widths</p> <p>11. grid-auto-flow : row（默认） | column | dense ;</p> <p>在没有设置网格项的位置时，这个属性控制网格项怎样排列。</p> <p>属性值：</p> <p>row: 按照行依次从左到右排列。</p> <p>column: 按照列依次从上倒下排列。</p> <p>dense: 按先后顺序排列。</p> <p>来看看下面结构：</p> <pre> <code class="language-css"><section class="container"> <div class="item-a">item-a</div> <div class="item-b">item-b</div> <div class="item-c">item-c</div> <div class="item-d">item-d</div> <div class="item-e">item-e</div> </section></code></pre> <p>下面定义5列2行网格，同时定义grid-auto-flow：row。</p> <pre> <code class="language-css">.container{ display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; }</code></pre> <p>像下面布局网格项。</p> <pre> <code class="language-css">.item-a{ grid-column: 1; grid-row: 1 / 3; } .item-e{ grid-column: 5; grid-row: 1 / 3; }</code></pre> <p>由于我们设置了grid-auto-flow：row，item-b、item-c和item-d在行上是从左到右排列，如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/33ca13fa9b13fe6e90775341f1af66cd.png"></p> <p style="text-align:center">grid-auto-flow-row</p> <p>如果我们设置 grid-auto-flow: column;结果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6ba83fa5ef72dd33a5b6018d146996ed.png"></p> <p style="text-align:center">grid-auto-flow-column</p> <p>12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];</p> <p>是一种简写形式，设置网格容器所有属性。</p> <p>属性值：</p> <p>none: 设置为所有属性的默认值。</p> <p><grid-template-rows> / <grid-template-columns>: 设置行和列的值，其他属性为默认值。</p> <p><grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 设置网格自动流、网格自动行、网格自动列的值，其他未设置则为默认值。</p> <p>例子1：</p> <pre> <code class="language-css">.container{ grid: 200px auto / 1fr auto 1fr; } 等同于 .container{ grid-template-rows: 200px auto; grid-template-columns: 1fr auto 1fr; grid-template-areas: none; }</code></pre> <p>例子2：</p> <pre> <code class="language-css">.container{ grid: column 1fr / auto; } 等同于 .container{ grid-auto-flow: column; grid-auto-rows: 1fr; grid-auto-columns: auto; }</code></pre> <p>设置在网格项上的属性</p> <ul> <li>grid-column-start</li> <li>grid-column-end</li> <li>grid-row-start</li> <li>grid-row-end</li> <li>grid-column</li> <li>grid-row</li> <li>grid-area</li> <li>justify-self</li> <li>align-self</li> </ul> <p>1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;</p> <p>grid-column-end: <number> | <name> | span <number> | span <name> | auto ;</p> <p>grid-row-start: <number> | <name> | span <number> | span <name> | auto ;</p> <p>grid-row-end: <number> | <name> | span <number> | span <name> | auto ;</p> <p>通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。</p> <p>属性值：</p> <p>line: 指定带编号或者名字的网格线。</p> <p>span <number>: 跨越轨道的数量。</p> <p>span <name>: 跨越轨道直到对应名字的网格线。</p> <p>auto: 自动展示位置，默认跨度为1。</p> <p>例子：</p> <pre> <code class="language-css">.item-a{ grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f214f6de5d12816c380bc895ed76d140.png"></p> <p style="text-align:center">grid-start-end-a</p> <pre> <code class="language-css">.item-b{ grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/89a21202fa0b27a8ae7a2255f310e294.png"></p> <p style="text-align:center">grid-start-end-a</p> <p>注：如果未声明grid-column-end或grid-row-end，默认将跨越一个轨道。项目也可以重叠，设置z-index来确定堆叠顺序。</p> <p>2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;</p> <p>grid-row: <start-line> / <end-line> | <start-line> / span <value> ;</p> <p>是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。</p> <p>例子：</p> <pre> <code class="language-css">.item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e26aead394593f5519b905bca4b1148b.png"></p> <p style="text-align:center">grid-start-end-c</p> <p>3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;</p> <p>定义网格项名字，以便创建模块（容器属性grid-template-areas来定义模块）。</p> <p>属性值：</p> <p>name: 项目名子。</p> <p><row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。</p> <p>例子：</p> <p>定义网格项名字：</p> <pre> <code class="language-css">.item-d{ grid-area: header }</code></pre> <p>通过网格线定位网格项：</p> <pre> <code class="language-css">.item-d{ grid-area: 1 / col4-start / last-line / 6 ; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/946d9cdbe4cdb95b671d1574a2d4c449.png"></p> <p style="text-align:center">grid-start-end-d</p> <p>4. justify-self: justify-self: start | end | center | stretch;</p> <p>定义单个网格项垂直于列网格线的对齐方式。</p> <p>属性值：</p> <p>start: 网格区域左对齐。</p> <p>end: 网格区域右对齐。</p> <p>center: 网格区域居中。</p> <p>stretch: 网格区域填满。</p> <p>例子：</p> <pre> <code class="language-css">.item-a{ justify-self: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/fb2d34eac096a95f6300d932773f2c08.png"></p> <p style="text-align:center">grid-justify-self-start</p> <pre> <code class="language-css">.item-a{ justify-self: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e00849bbb01f2f4ea312d78fed56440.png"></p> <p style="text-align:center">grid-justify-self-end</p> <pre> <code class="language-css">.item-a{ justify-self: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7a9f4ad63ca2ef564834e8340ab9368d.png"></p> <p style="text-align:center">grid-justify-self-center</p> <pre> <code class="language-css">.item-a{ justify-self: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/64b7cebdcaddebe3320088bf79b92a81.png"></p> <p style="text-align:center">grid-justify-self-stretch</p> <p>提示：也可以在容器上设置justify-items，达到全部网格项对齐。</p> <p>5. align-self: start | end | center | stretch;</p> <p>定义单个网格项垂直于行网格线的对齐方式。</p> <p>属性值：</p> <p>start: 网格区域顶部对齐。</p> <p>end: 网格区域底部对齐。</p> <p>center: 网格区域居中。</p> <p>stretch: 网格区域填满。</p> <p>例子：</p> <pre> <code class="language-css">.item-a{ align-self: start; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/6c8000b01f1b1806e925fe2b38cdc64c.png"></p> <p style="text-align:center">grid-align-self-start</p> <pre> <code class="language-css">.item-a{ align-self: end; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d6c1497a1e97ecb118cd64f0b2deb045.png"></p> <p style="text-align:center">grid-align-self-end</p> <pre> <code class="language-css">.item-a{ align-self: center; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/59a2b7c00ad87bbf53ecc6a3bd5480c4.png"></p> <p style="text-align:center">grid-align-self-center</p> <pre> <code class="language-css">.item-a{ align-self: stretch; }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/4dbebc0df8f4dc9039725749fc3d20f6.png"></p> <p style="text-align:center">grid-align-self-stretch</p> <p>提示：也可以在容器上设置align-items，达到全部网格项对齐。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/d183265a8dad</p> <p> </p>