使用Gridlex CSS Grid System轻松创建现代布局

xCSS flexbox出现之后，前端开发获得了长足的进步。它让我们可以轻松的针对响应式布局创建网格和分栏。

你不再需要用代码的方式创建网格，而是可以使用Gridlex等简单的工具。这个开源的flexbox库有着轻量化和易于自定义的特点。 

你要做的只是将Gridlex stylesheet添加到你的页面中，并且使用它的网格类（grid class）。内部分栏使用的类是.col然后你要将所有东西用.grid容器包裹起来。这个操作会让所有分栏的宽度一致，并且创建统一的界面。

如果你想要对每一个分栏进行自定义设置，你可以使用sizing class来将上面的操作进行override。这样你就可以让一个分栏的宽度为70%，另一个分栏的宽度为30%了（例如，内容/侧边栏布局）。

在Gridlex的主页上，你能找到很多网格样本，而且它提供了live demo和代码段，你可以将其复制粘贴到你的网站中。这个库的规模非常庞大，并且提供了很多可选的class，让你可以为任何网站创建网格。

所有网格最多都支持12个迷你分栏，你可以对这些分栏进行自定义操作，值得每个分栏的大小。这么说你可能会有点糊涂，我们来看个例子。

下面这段代码用来给一个网格下的分栏制定不同的宽度：

 <div class="grid">

  <div class="col">...</div>

  <div class="col-2_sm-12">...</div>

  <div class="col-6_sm-12">...</div>

</div>

请注意，里面的.grid包含了所有东西，分栏被分成了12个部分，每个分栏的宽度为⅓。然而，固定的分栏会对2和6分栏进行固定，因此第一个分栏的宽度会根据左侧的东西使用自动宽度。

使用另外两个分栏，我们可以推测我们还差4个分栏才能让分栏总数达到12个(12-6-2)。这是一道简单的数学题，但是class的命名规则会让你感到困惑，不过在实际上手以后，你马上就能理解这个命名规则。

Gridlex目前为2.x版本，并且正在GitHub上不断更新。随着支持的浏览器越来越多，我详细它将会引起更多人的注意，越来越多的网站都会使用这种页面分栏工具。

你可以在这里看看都有哪些网站使用了Gridlex，看看他们的最终效果。

即使你从来没有使用过flexbox，你一样可以使用Gridlex。但是我还是推荐你使用fun flexbox games来测试一下你的知识储备，确保自己拥有足够的基础知识。

目前Gridlex可以在GitHub repo上免费下载，你也可以使用npm或是bower将它pull过来。它提供了完整的说明文档。

原文来自:SDK.cn

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com