数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
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

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
使用Gridlex CSS Grid System轻松创建现代布局
发布:2017-05-16 15:01:27

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

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future