资讯专栏INFORMATION COLUMN

css栅格系统在项目中的灵活运用

summerpxy / 2404人阅读

摘要:前言栅格通常捆绑在各种框架中,但有时你需要自己去定制一个栅格来满足实际的业务需要,本文聊聊栅格系统在项目中的灵活运用。

前言

css栅格通常捆绑在各种框架中,但有时你需要自己去定制一个css栅格来满足实际的业务需要,本文聊聊css栅格系统在项目中的灵活运用。

需求

UI设计了如下布局,其中左上角橙色部分是固定的,蓝色部分是动态渲染的,从前往后依次展示,有一个就显示一块,有二个就显示二块,依次类推。如果数据多于6个,那么多余的数据,依次再在下方四列的地方进行展示。

分析

从图中可以看到,栅格分两种,一种是3列的栅格,一种是4列的栅格。当后端接口返回数据后,js需要进行判断:当数据大于6个时,前6个放在数组A中,数组A中的数据展示在3列的栅格中,多余部分放在数组B中,数组B中的数据展示在4列的栅格中。

html部分
{{item.name}}
{{item.name}}
css部分
    .grid-container {
      width: 100%;
    }
    .grid-container *{
      box-sizing: border-box;
    }

    .grid-container .row:before,
    .grid-container .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .grid-container [class*="col-"] {
      float: left;
      min-height: 1px;
      /*-- gutter --*/
      padding: 0 0 20px 20px;
    }
    .grid-container .col-3{
      width: 33.33%;
      height: 120px;
    }
    .grid-container .groups-cell {
      background-color: #66d3ff;
      height: 100px;
    }
    .grid-container .col-4 {
      width: 25%;
      height: 120px;
    }
    .grid-container .col-4:nth-child(4n+1) {
      padding: 0 0px 20px 0px;
    }

注意:在4列的栅格中,每行的第一个单元格不需要padding-left,所以,最后,还得设置.col-4:nth-child(4n+1)的值。

js部分

小结

本文并没有对css栅格的原理进行说明,而是针对具体业务问题,说明如何用css栅格系统来提供解决问题的一种方案,对于栅格系统原理,请见参考部分,这个老外写得非常详细。

参考

Creating Your Own CSS Grid System

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113519.html

相关文章

  • 面试题CSS盒子模型,左右固定宽度,中间自适应的五种死法

    摘要:优点相比之前布局更具有灵活性缺点脱离文档流,下面的元素都受影响。 面试题目 假设高度已知,请写出三栏布局,左右300px,中间自适应 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有几种方法呢? 最容易的应该想到利用float来写,代码如下 css样式代码,以下五种都是用一个样式代码 ...

    leanxi 评论0 收藏0
  • 设计架构

    摘要:先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案,希望具有参考价值。,和都是常见的软件架构设计模式,它通过分离关注点来改进代码的组织方式。 如何无痛降低 if else 面条代码复杂度 相信不少同学在维护老项目时,都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻,简单粗暴地继续增量修改常常只会让复杂度越来越高,可读性越来越差,有没...

    graf 评论0 收藏0

发表评论

0条评论

summerpxy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<