第三方网格系统
既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS 网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如Bootstrap和Foundation，就包含了网格系统。此外还有独立的网格系统，不是用 CSS 开发的就是用预处理器开发的。
让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是 Skeleton 的一部分，它是一种简单的 CSS 框架。
访问Skeleton 网站以开始，选择“Download”下载 ZIP 文件。解压文件，把 skeleton.css 和 normalize.css 复制到一个新路径下。
制作一个html-skeleton.html文件的副本，在同 skeleton 和 normalize CSS 相同的路径下保存副本。
在 HTML 页面包含 skeleton 和 normalize CSS，通过把以下内容加到文件头部的方式：
html
Skeleton 不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的 CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。
备注：Normalize 是由 Nicolas Gallagher 编写的一个很有用的小 CSS 库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。
我们将会使用和在前面的示例中相似的 HTML。将下面的内容加到你的 HTML body 中：
html
要开始使用 Skeleton，我们需要给包装的
你可以看看 skeleton.css 文件里，CSS 在我们应用这个类的时候是如何使用的。
css.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的
现在让我们铺开容器盒子。Skeleton 基于一个 12 列的网格。顶端一行的盒子都需要加上one column的类，以让它们横跨一列。
现在加上这些，像是在下面的节录里面显示的那样：
html
/* and so on */
然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：
html
试着保存你的 HTML，在你的浏览器里面载入，看下效果。
备注：如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的html-skeleton-finished.html文件进行比较（另见实时运行版）。
如果你看下 skeleton.css 文件的内容，你能理解这是如何实现的。例如，Skeleton 有下面的定义内容，用于样式化加入了“three colomns”类的元素。
css.three.columns {
width: 22%;
}
Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。
正如你所看到的这样，我们使用 Skeleton 的时候，几乎不需要写多少 CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了 CSS 网格布局，许多开发者正在停止使用这些框架，转而使用 CSS 提供的内建的原生网格。