掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

使用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个部分,每个分栏的宽度为。然而,固定的分栏会对26分栏进行固定,因此第一个分栏的宽度会根据左侧的东西使用自动宽度。

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

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

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

 

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

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

qrcode_for_gh_9de197bcc61b_258.jpg

原文来自:SDK.cn

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

0512-88869195
数 据 驱 动 未 来
Data Drives The Future