grid-kiss让网格制作变得更容易
CasLindsley
8年前
<h2>CSS Grid是什么</h2> <p>在详细介绍这个插件之前，先简单的告诉大家，我们这里所说的Grid是CSS布局中的一个模块。它不是早前所说的网格系统（Grid system），而是CSS 布局自带的一个布局模块。这个模块被称为 CSS Grid ，也有人把其称为CSS原生网格。</p> <p>如果你从未接触过CSS Grid相关的知识，建议你先阅读站上早前分享过的CSS Grid相关教程。特别推荐大家阅读这篇译文《CSS Grid布局指南》，如果你觉得译文质量不够好，你也可以移步阅读 <a href="/misc/goto?guid=4959735438526642062" rel="nofollow,noindex">@Chris House</a> 写的原文《 <a href="/misc/goto?guid=4959735438614917972" rel="nofollow,noindex">A Complete Guide to CSS Grid Layout</a> 》。</p> <p>这里假设你已经对CSS Grid有了一定的基础了解，哪怕是最基础的知识。因为我们今天不是来介绍CSS Grid的基础知识，而是介绍如何使用PostCSS插件 grid-kiss 让制作网格变得更容易、更简单。如果你感兴趣的话，欢迎继续往下阅读。</p> <h2>grid-kiss目的</h2> <p>grid-kiss是PostCSS万千 插件 中的一个，旨在用一个形象的网格(代码中画的网格)来取代CSS Grid自带的24个属性。简单的说，就是grid-kiss把在代码中画好的网格编译出CSS Grid对应的网格属性。</p> <h2>先来看个示例</h2> <p>上面也说过了，grid-kiss是用来把画好的网格编译成CSS对应的网格属性。那究竟是怎么样的，先给大家看一个作者在Github提供的示例，让大家在脑海中有一个简单印象。</p> <p>比如，在编译前的CSS代码中有这样一段代码：</p> <pre> <code class="language-css">body { grid-kiss: "+-------------------------------+ " "| header ↑ | 120px" "+-------------------------------+ " " " "+-- 30% ---+ +--- auto --------+ " "| .sidebar | | main | auto " "+----------+ +-----------------+ " " " "+-------------------------------+ " "| ↓ | 60px " "| → footer ← | " "+-------------------------------+ " }</code></pre> <p>经过PostCSS编译之后出来的CSS代码：</p> <pre> <code class="language-css">body > header { grid-area: header; align-self: start } body > .sidebar { grid-area: sidebar } body > main { grid-area: main } body > footer { grid-area: footer; justify-self: center; align-self: end } body { display: grid; align-content: space-between; grid-template-rows: 120px 1fr 60px; grid-template-columns: 30% 1fr; grid-template-areas: "header header" "sidebar main " "footer footer" }</code></pre> <p>在浏览器中将看到如下图的效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/63415087ea31568de5f53670f4685bae.png"></p> <p>如果你想立马体验的话，你可以通过 playground 在线工具尝试一把。另外还可以在Codepen上看看 @jonathanneal 在Codepen上提供的 插件模板 。</p> <p>如果grid-kiss和媒体查询结合在一起，可以轻易的实现响应式布局效果。如下图所示：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8b09acb602c2246a70b9b8f9f4acc5d7.png"></p> <p>是不是很神奇，是不是没想到未来的CSS还可以这么的写。可以说，大家把CSS都给玩坏了。同时也能证明 @Sylvain 写的这个PostCSS插件是多么的强大，又是多有意思。</p> <h2>配置环境</h2> <p>文章开头就说了grid-kiss是PostCSS的一个插件，如果你想要正常的使用这个插件，或者尝试玩一把另类的网格制作方式。那么本地就要有一个PostCSS的工作环境。当然了，如果你为了省事的话，你可以使用 playground 。这里还是说怎么在本地使用吧。</p> <p>我个人喜欢使用PostCSS和Gulp配合使用，如果从没接触过PostCSS，也不用担心，你可以通过 PostCSS深入学习这个系列 中的《 PostCSS深入学习：Gulp设置 》一文配置好环境。接下来的内容假设你配置好PostCSS和Gulp的本地环境。</p> <p>环境有了，咱们就来安装grid-kiss吧。你可以通过 yarn 或者 npm 的方式来进行安装。</p> <p>yarn:</p> <pre> <code class="language-css">yarn add postcss-grid-kiss --dev</code></pre> <p>npm:</p> <pre> <code class="language-css">npm install postcss-grid-kiss --save-dev</code></pre> <p>我采用的是后面这种方式安装的。安装完成后，需要在 gulpfile.js 做一些简单的配置：</p> <pre> <code class="language-css">var gridkiss = require('postcss-grid-kiss'); gulp.task('css', function(){ var processors = [ // autoprefixer(browserOptions), cssnext(browserOptions), gridkiss({ fallback: false, screwIE: false, optimizeCalc: false }) ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); });</code></pre> <p>其中最重要的，也是很关键的部分：</p> <pre> <code class="language-css">gridkiss({ fallback: false, screwIE: false, optimizeCalc: false })</code></pre> <p>这三个是grid-kiss的配置选项。具体这几个选项是什么意思？稍后介绍。为了让你能本地更好的运行起来，可以把 gulpfile.js 和 package.json 保存到你项目的根目录下。同时建议你的测试项目结构如图那样：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7157756937c07e1dc546651e869d0564.png"></p> <p>这个时候打开命令终端，把路径切换到项目根目下，执行：</p> <pre> <code class="language-css">npm i</code></pre> <p>然后在命令终端执行 gulp 命令。这个时候 src/style.css （编译前的样式文件）就会编译到 dest/style.css （编译后的样式文件）。同时也表明你的环境是OK的。后面我们的样式都是在 src/style.css 中编辑。另外，你的命令终端不要关闭，这样你只要修改了 style.css 文件，保存之后， dest/style.css 就会自动更新。</p> <h2>配置参数</h2> <p>前面的环境配置中也展示了，grid-kiss有三个选项，在使用的时候可以自行配置。</p> <pre> <code class="language-css">postcss([ gridkiss({ ...options }) ])</code></pre> <h3>fallback</h3> <p>截至2016年12月， CSS Grid布局规范 只是一个候选规范，并没有得到广泛的支持。到2017年3月，支持的浏览器会越来越多，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。</p> <p>那么grid-kiss提供了一个配置项 fallback 用来做浏览器降级处理。其默认值是 false ，如果把它设置为 true 。就会对CSS Grid做降级处理，通过 position 和 calc() 模拟网格布局，让不支持CSS Grid的浏览器也能正常的访问。</p> <h3>screwIE</h3> <p>这个选项是用来忽略IE浏览器的降级处理，其默认值 false 。 screwIE 生效有一个条件，那就是 fallback 设置了 true 。</p> <p>由于IE不支持 @supports ，所以grid-kiss需要通过添加一个特殊的媒体查询 @media screen and (min-width:\0) 只让IE识别。</p> <p>如果你的项目不需要考虑IE浏览器，又为了减少编译出来的文件体积，你可以这样设置grid-kiss:</p> <pre> <code class="language-css">postcss([ gridkiss({ fallback: true, screwIE: true }) ])</code></pre> <h3>optimizeCalc</h3> <p>optimizeCalc 默认值是 true 。主要用来尽可能简化 calc() 表达式。和 screwIE 类似，如果要让 optimizeCalc 生效，前提是 fallback 设置的值为 true 。</p> <h2>grid-kiss使用方式</h2> <p>文章开头，看到的示例是通过中折线 - 和加号 + 来在文件中绘制网格。除此之外还有另外两种方式。</p> <p>┌ ┐ └ ┘ 和 │ ─:</p> <pre> <code class="language-css">div { grid-kiss: "┌──────┐ ┌──────┐ " "│ │ │ ↑ │ " "│ │ │ bar →│ 200px " "│ ↓ │ └──────┘ " "│ baz │ - " "│ ↑ │ ┌──────┐ " "│ │ │ ↑ │ 200px " "└──────┘ │ │ " " │ foo │ - " "┌──────┐ │ │ " "│ qux │ │ ↓ │ 200px " "│ ↓ │ │ │ " "└─20em─┘ └──────┘ " }</code></pre> <p>╔ ╗ ╚ ╝和║ ═：</p> <pre> <code class="language-css">main { grid-kiss: "╔═══════╗ ╔════════════════╗ " "║ ║ ║ .article ║ auto " "║ ↑ ║ ╚════════════════╝ " "║ nav ║ ╔════╗ ╔════════╗ " "║ ║ ║ ║ ║ aside →║ 240px" "╚═ 25% ═╝ ╚════╝ ╚═ 80em ═╝ " }</code></pre> <h2>如何绘制网格</h2> <p>前面简单的展示了绘制网格的方式。那么在实际绘制网格，可以依据下面几点来操作：</p> <ul> <li>绘制不同的区域，可以得到不同的网格。你可以使用一些工作来帮助你绘制网格，比如 <a href="/misc/goto?guid=4959735438699701508" rel="nofollow,noindex">AsciiFlow</a></li> <li>在每个区写一个CSS选择器来匹配相应的元素。它可以是一个元素标签、类名或ID选择器或其他有效的选择器</li> <li>匹配的元素必须是网格元素的子元素</li> <li>单独的每一行由一个换行符( \n )来决定，而且每一行具有相同的缩进</li> <li>每一行的开始和结束由一个双引号( " )来控制</li> <li>确定每个转角是正确对齐，可以使用 + 来控制，然后另一个 + 表示创建新一列</li> </ul> <p>更多的使用方式，这里就不一一阐述了，感兴趣的可以查看插件提供的 <a href="/misc/goto?guid=4959735438783204759" rel="nofollow,noindex">使用文档</a> 。另外把对齐方式在这里展示一下：</p> <h3>水平对齐方式控制</h3> <p>justify-content: stretch</p> <pre> <code class="language-css">"+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1f88e7ed0fe41315f9ea0659f0cd7215.png"></p> <p>justify-content: start</p> <pre> <code class="language-css">"+---+ +---+ +---+ " "| a | | b | | c | " "+---+ +---+ +---+ " "+---+ +---+ +---+ " "| d | | e | | f | " "+---+ +---+ +---+ " "+---+ +---+ +---+ " "| g | | h | | i | " "+---+ +---+ +---+ "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f7fa829e156aa65a30d61c747498f1ef.png"></p> <p>justify-content:end</p> <pre> <code class="language-css">" +---+ +---+ +---+" " | a | | b | | c |" " +---+ +---+ +---+" " +---+ +---+ +---+" " | d | | e | | f |" " +---+ +---+ +---+" " +---+ +---+ +---+" " | g | | h | | i |" " +---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/9a311336e6a18607ad64eaab21ad3e42.png"></p> <p>justify-content:center</p> <pre> <code class="language-css">" +---+ +---+ +---+ " " | a | | b | | c | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | d | | e | | f | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | g | | h | | i | " " +---+ +---+ +---+ "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7a9f4ad63ca2ef564834e8340ab9368d.png"></p> <p>justify-content: space-between</p> <pre> <code class="language-css">"+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/afb7cadb9b9dff6ecdf0e011c1824244.png"></p> <p>justify-content: space-evenly</p> <pre> <code class="language-css">" +---+ +---+ +---+ " " | a | | b | | c | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | d | | e | | f | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | g | | h | | i | " " +---+ +---+ +---+ "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1c59ad0084e1aee5a245416f19a0d658.png"></p> <p>justify-content:space-around</p> <pre> <code class="language-css">" +---+ +---+ +---+ " " | a | | b | | c | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | d | | e | | f | " " +---+ +---+ +---+ " " +---+ +---+ +---+ " " | g | | h | | i | " " +---+ +---+ +---+ "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/3b86fdb0e25e0bdc6ec3489f495da567.png"></p> <h3>垂直对齐方式控制</h3> <p>align-content: stretch</p> <pre> <code class="language-css">"+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f995be4428e49f66a9c4455aff7e8111.png"></p> <p>align-content: start</p> <pre> <code class="language-css">"+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+" " " " "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/e28df0d7e14e12bdfbf2e3e48680996f.png"></p> <p>align-content: end</p> <pre> <code class="language-css">" " " " "+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/33207e598006fb09977ce5c83fc5df72.png"></p> <p>align-content: center</p> <pre> <code class="language-css">" " "+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+" " "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e2a45b761ffebd9e0da3f0b98a21c18.png"></p> <p>align-content: space-between</p> <pre> <code class="language-css">"+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" " " "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" " " "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/dc4b8fc3f1845a4b578d8191347fcac0.png"></p> <p>align-content: space-evenly</p> <pre> <code class="language-css">" " "+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" " " "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" " " "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+" " "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/f18580eaf06633de75642a3675592606.png"></p> <p>align-content: space-around</p> <pre> <code class="language-css">" " "+---+ +---+ +---+" "| a | | b | | c |" "+---+ +---+ +---+" " " " " "+---+ +---+ +---+" "| d | | e | | f |" "+---+ +---+ +---+" " " " " "+---+ +---+ +---+" "| g | | h | | i |" "+---+ +---+ +---+" " "</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/0b002e13b9bfc04642c818d7a91adb6f.png"></p> <h3>区域内水平对齐方式</h3> <p>justify-self: start</p> <p>使用 < 或 ← ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | .item-a < | or | .item-a ← | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/fb2d34eac096a95f6300d932773f2c08.png"></p> <p>justify-self: end</p> <p>使用 > 或 → ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | > .item-a | or | → .item-a | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e00849bbb01f2f4ea312d78fed56440.png"></p> <p>justify-self: stretch</p> <p>使用 > 和 > 或 ← 和 → ：</p> <pre> <code class="language-css">+--------------+ +--------------+ | < .item-a > | or | ← .item-a → | +--------------+ +--------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/64b7cebdcaddebe3320088bf79b92a81.png"></p> <p>justify-self:center</p> <p>使用 > 和 < 或者 → 和 ← ：</p> <pre> <code class="language-css">+--------------+ +--------------+ | > .item-a < | or | → .item-a ← | +--------------+ +--------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/7a9f4ad63ca2ef564834e8340ab9368d.png"></p> <h3>区域内垂直对齐方式</h3> <p>align-self:start</p> <p>使用 ^ 或者 ↑ ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | .item-a | or | .item-a | | ^ | | ↑ | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/6c8000b01f1b1806e925fe2b38cdc64c.png"></p> <p>align-self: end</p> <p>使用 v 或 ↓ ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | v | or | ↓ | | .item-a | | .item-a | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d6c1497a1e97ecb118cd64f0b2deb045.png"></p> <p>align-self: stretch</p> <p>使用 ^ 和 v 或者 ↑ 和 ↓ ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | ^ | | ↑ | | .item-a | or | .item-a | | v | | ↓ | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/4dbebc0df8f4dc9039725749fc3d20f6.png"></p> <p>align-self: center</p> <p>使用 v 和 ^ 或者 ↓ 和 ↑ ：</p> <pre> <code class="language-css">+-------------+ +-------------+ | v | | ↓ | | .item-a | or | .item-a | | ^ | | ↑ | +-------------+ +-------------+</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/59a2b7c00ad87bbf53ecc6a3bd5480c4.png"></p> <p>上面展示了网格内对齐方式，下面来实战一下，看一个小示例：</p> <pre> <code class="language-css">.grid { grid-kiss: " +-------+ +-------+ +-------+ " " | .a | | .b | | .c | " " +-------+ +-------+ +-------+ " " +-------+ +-------+ +-------+ " " | .d | | .e | | .f | " " +-------+ +-------+ +-------+ " " +-------+ +-------+ +-------+ " " | .g | | .h | | .i | " " +-------+ +-------+ +-------+ " " | 200px | | 200px | | 200px | " }</code></pre> <p>示例效果如下图所示：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6dcb040fb2205a98cd71a37f118a7a87.png"></p> <h2>grid-kiss中不足之处</h2> <p>上面演示了grid-kiss制作CSS Grid。那么是不是就说grid-kiss就完全能编译出CSS Grid规范中对应中所有的属性呢？那么支持的属性有：</p> <ul> <li>display:grid</li> <li>grid-template-columns</li> <li>grid-template-rows</li> <li>grid-template-areas</li> <li>justify-content</li> <li>align-content</li> <li>grid-area</li> <li>justify-self</li> <li>align-self</li> </ul> <p>不支持的属性有：</p> <ul> <li>grid-column-gap</li> <li>grid-row-gap</li> <li>grid-gap</li> <li>justify-items</li> <li>align-items</li> <li>grid-auto-columns</li> <li>grid-auto-rows</li> <li>grid-auto-flow</li> <li>grid</li> <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> </ul> <h2>总结</h2> <p>如果你耐心的看到这里，那说明你对grid-kiss有所了解了。如果你跟着上面的一起操作过的话，那你对其有了更深入的了解。由于CSS Grid还没有得到很好的支持，不过这样尝试也不未尝不可。自己尝试下来，虽然它能更形象的帮助我们实现CSS Grid布局。但并不能说他就是万能的，比如说前面就提到过，这个插件还有很多CSS Grid对应的属性不支持。抛开这方面而言，在编辑器里绘制多格还是需要一定的时间，如果你是处女座，那有可能更纠结。另外如果你对CSS Grid的每个属性都非常的了解的话，使用手写属性制作网格有可能还是要比这个方式更快。</p> <p>今天把这个抛出来，让大家体验一下另类的CSS玩法。特别是有了PostCSS之后，可以说，CSS可以有更多的玩法。如果你感兴趣，你也可以玩出另类。(^_^)。</p> <p> </p> <h3> </h3> <p>来自：http://www.w3cplus.com/preprocessor/keep-css-grids-simple-with-postcss-grid-kiss.html</p> <p> </p>