前言

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

需求

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

分析

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

html部分

<div id="app">
  <div class="grid-container">
    <div style="width: 25%; height: 220px; float: left; background-color: #FF6600; "></div>
    <div class="row" style="width: 75%; float: right;">
      <div class="col-3" v-for="(item, index) in groupListCol3" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
    <div class="row" style="width: 100%;">
      <div class="col-4" v-for="(item, index) in groupListCol4" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</div>

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部分

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      groupListCol3: [],
      groupListCol4: []
    },
    created () {
      let list = [
        {name: 'A'},
        {name: 'B'},
        {name: 'C'},
        {name: 'D'},
        {name: 'E'},
        {name: 'F'},
        {name: 'G'},
        {name: 'H'},
        {name: 'I'},
        {name: 'J'},
        {name: 'K'},
        {name: 'L'}
      ]
      if (list.length > 6) {
        this.groupListCol3 = list.slice(0, 6)
        this.groupListCol4 = list.slice(6)
      } else {
        this.groupListCol3 = list
      }
    }
  })
</script>

小结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS删除li的默认样式怎么做，如何设置

  方法：1、用“list-style”属性去除li元素默认小圆点样式，语法“li{list-style:none}”；2、用padding和margin属性去除li元素默认内外边距样式，语法为“li{padding:0;margin:0}”。

• CSS3 animation动画实现中steps函数怎么使用

  本文通过实例代码给大家介绍了CSS3 animation – steps 函数，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

• 用css写圆形镂空打孔效果的优惠券

  我们在开发电子商务网站时，往往会遇到发开商场优惠券的需求，那么我们就需要考虑优惠券的样式。边缘镂空打孔效果，是我们经常能在一些优惠券的设计上能看到的，下面是就给大家分享一下css圆形镂空效果的实现。大家在做优惠券时，能参考一下。

• AmazeUI怎么实现多种导航式菜单及相关问题如何解决

  这篇文章主要介绍了AmazeUI中各种的导航式菜单与解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• CSS提供的timeline控件能做什么，实现是什么样的

  在web项目中我们经常要使用时间轴（timeline）控件。本文提供一种基于CSS3的可逐项展开的timeline，在各展开项中可以嵌入文本、图片、视频等元素。运行效果如下： 实现 该控件的实现过程较为简单，主要由test.html文件和timeline.css...