去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下，就是没动手，今天体验了一下，还是很有意思的。今天花点时间整理一下，跟大家一起分享。

CSS Grid是什么

在详细介绍这个插件之前，先简单的告诉大家，我们这里所说的Grid是CSS布局中的一个模块。它不是早前所说的网格系统（Grid system），而是CSS 布局自带的一个布局模块。这个模块被称为CSS Grid，也有人把其称为CSS原生网格。

如果你从未接触过CSS Grid相关的知识，建议你先阅读站上早前分享过的CSS Grid相关教程。特别推荐大家阅读这篇译文《CSS Grid布局指南》，如果你觉得译文质量不够好，你也可以移步阅读@Chris House写的原文《A Complete Guide to CSS Grid Layout》。

这里假设你已经对CSS Grid有了一定的基础了解，哪怕是最基础的知识。因为我们今天不是来介绍CSS Grid的基础知识，而是介绍如何使用PostCSS插件grid-kiss让制作网格变得更容易、更简单。如果你感兴趣的话，欢迎继续往下阅读。

grid-kiss目的

grid-kiss是PostCSS万千插件中的一个，旨在用一个形象的网格(代码中画的网格)来取代CSS Grid自带的24个属性。简单的说，就是grid-kiss把在代码中画好的网格编译出CSS Grid对应的网格属性。

先来看个示例

上面也说过了，grid-kiss是用来把画好的网格编译成CSS对应的网格属性。那究竟是怎么样的，先给大家看一个作者在Github提供的示例，让大家在脑海中有一个简单印象。

比如，在编译前的CSS代码中有这样一段代码：

body {
    grid-kiss:
        "+-------------------------------+      "
        "|           header ↑            | 120px"
        "+-------------------------------+      "
        "                                       "
        "+-- 30% ---+  +--- auto --------+      "
        "| .sidebar |  |       main      | auto "
        "+----------+  +-----------------+      "
        "                                       "
        "+-------------------------------+      "
        "|              ↓                | 60px "
        "|         → footer ←            |      "
        "+-------------------------------+      "
}

经过PostCSS编译之后出来的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"
}

在浏览器中将看到如下图的效果：

如果你想立马体验的话，你可以通过playground在线工具尝试一把。另外还可以在Codepen上看看@jonathanneal在Codepen上提供的插件模板。

如果grid-kiss和媒体查询结合在一起，可以轻易的实现响应式布局效果。如下图所示：

是不是很神奇，是不是没想到未来的CSS还可以这么的写。可以说，大家把CSS都给玩坏了。同时也能证明@Sylvain写的这个PostCSS插件是多么的强大，又是多有意思。

配置环境

文章开头就说了grid-kiss是PostCSS的一个插件，如果你想要正常的使用这个插件，或者尝试玩一把另类的网格制作方式。那么本地就要有一个PostCSS的工作环境。当然了，如果你为了省事的话，你可以使用playground。这里还是说怎么在本地使用吧。

我个人喜欢使用PostCSS和Gulp配合使用，如果从没接触过PostCSS，也不用担心，你可以通过PostCSS深入学习这个系列中的《PostCSS深入学习：Gulp设置》一文配置好环境。接下来的内容假设你配置好PostCSS和Gulp的本地环境。

环境有了，咱们就来安装grid-kiss吧。你可以通过yarn或者npm的方式来进行安装。

yarn:

yarn add postcss-grid-kiss --dev