CSS Grid Layout 从入门到入门
Lidia9919
8年前
<p>CSS 的 Grid Layout 已经开始在浏览器上有资词啦！</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e0d9c08fc26d456a19b560ecfcf6411.jpg"></p> <p>可以看到在 FF 的52版本以上已经支持了，Chrome 从57开始支持，如果用 dev 版本或者 canary 版本都可以了，safari 包括10.1和 tp 版都已经支持了。</p> <p>可以愉快的搞起来啦。</p> <p>友情提醒，如果想看到某些代码的效果，请在上文提到的支持 Grid 的浏览器中查看本文，移动端浏览器通通不支持。</p> <h2>基本概念</h2> <p>一个 Grid 其实就是由一系列相交的线组成的结构，其主要的概念如下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6cfd539cefb049423de3539c46970e0c.jpg"></p> <ul> <li><em>grid lines</em> 组成 grid 的线，垂直或者水平，并且从1开始计数</li> <li><em>grid tracks</em> 在 grid 中的行和列，其中水平的为行(row)，竖直的为列(column)</li> <li><em>grid cells</em> 行和列的交点</li> <li><em>grid area</em> 由一系列相邻的 cells 组成的长方形区域</li> </ul> <h2>创建一个 Grid</h2> <p>首先就是一个新的 display 值，叫做 grid 。</p> <p>将某个元素的 display 设置为 grid 就可以创建一个 grid layout 了。</p> <pre> <code class="language-css"><div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </code></pre> <p>然后写点 CSS</p> <pre> <code class="language-css">.grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-template-rows: 100px 100px; grid-gap: 20px; } .grid div { background-color: grey; } </code></pre> <p>然后就可以看到如下效果啦：</p> <p>See the Pen aJypqZ by Yang Cong ( @nighting ) on CodePen .</p> <p>grid-template-columns 属性，定义了 grid 的各个列的宽度</p> <p>grid-template-rows 属性，定义了grid 的各个行的高度</p> <p>这样就可以画出一整个 grid 了</p> <p>而 grid-gap 属性，定义了各个 grid cells 之间的距离</p> <h2>自适应的 Grid</h2> <p>如你发现，上面的定义只是创建了一个 grid，并没能自适应屏幕。</p> <p>Grid 标准引入了一个新的单位，fr，我们可以使用 fr 单位来做自适应。</p> <p>1fr 是一个『分数单位』，用来表示『元素剩余的空间』 — MDN</p> <pre> <code class="language-css">.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 20px; } .grid div:nth-child(2n) { background-color: darkgrey; } .grid div:nth-child(2n+1) { background-color: grey; } </code></pre> <p>效果如下</p> <p>See the Pen ZeJerK by Yang Cong ( @nighting ) on CodePen .</p> <h2>minmax()</h2> <p>我们可能不单单需要一个简单的长度，也不一定需要某个元素无限扩大或收缩。这时候就可以使用 minmax 函数，这个函数接收两个参数，分别是 min 和 max 的长度，比如</p> <pre> <code class="language-css">grid-template-columns: minmax(300px, 1fr) minmax(200px, 400px) 300px; </code></pre> <p>效果如下</p> <h2>使用 repeat()</h2> <p>你可能也发现了，如果我需要四列，那我需要写4个长度，如果需要100列……天呐，无法想象。机智的劳动人民怎么会允许这种事情的发生，于是随带着 Grid 一起的还有个CSS函数，repeat()</p> <pre> <code class="language-css">repeat(times:Number, length:Length) </code></pre> <p>如下</p> <ul> <li>repeat(4, 1pr) === 1pr 1pr 1pr 1pr</li> <li>repeat(3, 100px) === 100px 100px 100px</li> </ul> <p>因此上面的 CSS 也可以改写成如下：</p> <pre> <code class="language-css">.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 200px); grid-gap: 20px; } </code></pre> <p>效果还是如上！</p> <h2>auto-fit & auto-fill</h2> <p>有时候我们并不需要确定行数和列数，可能我们希望能根据浏览器的窗口大小来自动的适应。这时候我们就会用到 auto-fill 和 auto-fit 属性。两者的区别我也不是很清楚，貌似 auto-fill 会尽可能多得去增加行数和列数，而 auto-fit 则相反。</p> <p>我们可以看到下面两张图的差别：</p> <p><img src="https://simg.open-open.com/show/53c5f04c9450c0d4943743d1f0510d8c.jpg"></p> <p>以及</p> <p><img src="https://simg.open-open.com/show/7aea1581be9f5eeee580599b3edb59fb.jpg"></p> <p>从表现上看，auto-fit 不会产生空的行或者列。</p> <h2>template areas</h2> <p>Grid 还提供了一种用于排版的方法，也就是 template areas，手动得将想要的layout 设置，而且还是『可视化』的哦</p> <p>具体代码如下</p> <pre> <code class="language-css"><div class="grid"> <header class="box"></header> <aside class="box"></aside> <article class="box"></article> <footer class="box"></footer> </div> </code></pre> <p>这是我们很常见的头部+导航+主要内容+底部的布局</p> <pre> <code class="language-css">header { grid-area: hd; background-color: #ff2e9c; } aside { grid-area: sidebar; background-color: #61dae4; } article { grid-area: at; background-color: #73d545; } footer { grid-area: ft; background-color: #f2ee3e; } .grid { display: grid; grid-gap: 20px; grid-template-rows: 50px 400px 50px; grid-template-areas: "hd hd" "sidebar at" "sidebar ft"; } .box { border-radius: 8px; } </code></pre> <p>最主要的代码就是 grid-template-areas 这个属性啦，里面的值生动得呈现了最终的效果。</p> <h2>定位和占位</h2> <p>有时候我们并不想按照特定的顺序来排列，也有某些部分想要更多的 cell</p> <p>我们可以使用属性 grid-column-start 和 grid-column-end 以及对应的 grid-row-start 和 grid-row-end 来进行定位和占位</p> <p>为了方便，我们可以使用缩写属性 grid-column 和 grid-row</p> <pre> <code class="language-css"><div class="grid"> <div id="a"></div> <div id="b"></div> </div> </code></pre> <pre> <code class="language-css">.grid { display: grid; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(5, 100px); grid-gap: 20px; } #a { background-color: #ff2e9c; grid-column: 2 / 3; grid-row: 3 / 4; } #b { background-color: #61dae4; grid-column: 3 / 5; grid-row: 2 / span 3; } </code></pre> <p>最终的结果是酱的：</p> <p>See the Pen NpvjMa by Yang Cong ( @nighting ) on CodePen .</p> <p>其中出现了一个 span 的值，表示跨度。</p> <p>还记得开头出现的 <em>gird lines</em> 吗，是从1开始计数的，这里我们定位的值即是 grid lines 的标号。</p> <p>比如 grid-row: 2 / span 3 ，表示该元素纵向从第二根线开始，并且占据3个 cell。</p> <h2>对齐</h2> <h2>align-content 和 justify-content</h2> <p>justify-content 用于定义 grid 在水平方向 如何对齐</p> <p>align-content 用于定义 grid 在垂直方向 如何对齐</p> <p>他们有如下几个值</p> <ul> <li>start</li> <li>center</li> <li>end</li> <li>space-between</li> <li>space-around</li> <li>space-evenly</li> <li>stretch</li> </ul> <p>具体表现如下：</p> <p>DOM结构</p> <pre> <code class="language-css"><div class="grid"> <div></div> <div></div> <div></div> <div></div> </div> </code></pre> <p>CSS</p> <pre> <code class="language-css">.grid { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 150px 150px 150px; height: 500px; width: 650px; border: 1px solid grey; } .grid div:nth-child(1) { grid-column: 1 / 3; grid-row: 1; background-color: #ff2e9c; } .grid div:nth-child(2) { gird-column: 1; grid-row: 2; background-color: #61dae4; } .grid div:nth-child(3) { gird-column: 2; grid-row: 2; background-color: #73d545; } .grid div:nth-child(4) { gird-column: 3; grid-row: 1 / 3; background-color: #f2ee3e; } </code></pre> <ul> <li>align-content: strat; justify-content: start;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/66f598a24ea614069f025c418bc64ce9.jpg"></p> <ul> <li>align-content: center; justify-content: center;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/7bc0fd0ffd416174f82e83a9edb5b209.jpg"></p> <ul> <li>align-content: end; justify-content: end;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b4392e1f16e7e5318e68b5224b849d5d.jpg"></p> <ul> <li>align-content: center; justify-content: space-evenly;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/a9ba3141567fc00cf579bd11cd04e1e2.jpg"></p> <ul> <li>align-content: space-around; justify-content: center;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b4392e1f16e7e5318e68b5224b849d5d.jpg"></p> <ul> <li>align-content: space-between; justify-content: center;</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/1926ff2a3250ae608eb53b0f80d70a62.jpg"></p> <h2>justify-self 和 align-self</h2> <p>justify-self 用于定义grid 内元素在水平方向的排列</p> <p>align-self 用于定于 grid 内元素在垂直方向的排列</p> <p>有如下几种值</p> <ul> <li>start</li> <li>end</li> <li>center</li> <li>stretch 默认值</li> </ul> <p>使用和效果如下：</p> <p>See the Pen ZeJdvg by Yang Cong ( @nighting ) on CodePen .</p> <p>这俩属性是用在子元素上的，如果想给某个 grid 内的所有元素统一添加，可以使用</p> <ul> <li>align-items</li> <li>justify-items</li> </ul> <p>这两个属性</p> <p>在 webkit 官网的介绍中也有这样一张能够一目了然的图</p> <p><img src="https://simg.open-open.com/show/9f58ce407d44ecf91618bcdc11b6f5a6.jpg"></p> <h2>从入门到入门</h2> <p>有了 Grid 布局，我们可以很方便得完成非常多复杂的布局。</p> <p>譬如之前研究过的双飞翼布局和圣杯布局，通过 Grid 来写的话，是非常方便的。</p> <p>再譬如一些非常复杂的图文混排的布局，grid 也可以非常轻松的实现。</p> <p>不过现在 grid 的支持度还很低，从目前还有无数公司兼容 IE6的生态来讲，想在生产环境用上 grid 仿(jiu)佛(shi)是个遥不可及的事情……</p> <p>不过这也抵不住前端汪折腾的心啊。</p> <p> </p> <p>来自：http://nighting.me/2017/03/14/CSS-Grid-Layout-从入门到入门/</p> <p> </p>