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

summerpxy 发布于2019-08-29 16:05 / 2269人阅读

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

前言

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

idc机房托管服务器托管 webrtc项目中的stl库在哪里栅格系统原理 bootstrap栅格系统 java项目中的调度

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

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

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

摘要：前言栅格通常捆绑在各种框架中，但有时你需要自己去定制一个栅格来满足实际的业务需要，本文聊聊栅格系统在项目中的灵活运用。前言 css栅格通常捆绑在各种框架中，但有时你需要自己去定制一个css栅格来满足实际的业务需要，本文聊聊css栅格系统在项目中的灵活运用。需求 UI设计了如下布局，其中左上角橙色部分是固定的，蓝色部分是动态渲染的，从前往后依次展示，有一个就显示一块，有二个就显示二块...

soasme 2019-08-05 14:27 评论0 收藏0
如何编写轻量级 CSS 框架

摘要：如今轻量级框架如雨后春笋，层出不穷。那么这些轻量级框架有没有意义呢当然有。这个轻量级框架在上有很高人气，但是说实话，用处并不大。编写轻量级框架终于到了本篇文章的重头戏。大多数的轻量级框架只是框架，不涉及部分，主要用于网页的布局。 showImg(http://images2017.cnblogs.com/blog/999445/201711/999445-201711131956147...

Dr_Noooo 2019-08-05 12:22 评论0 收藏0
面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法

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

leanxi 2019-08-29 17:22 评论0 收藏0
面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法

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

goji 2019-08-05 15:34 评论0 收藏0
设计架构

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

graf 2019-06-24 17:56 评论0 收藏0