css柵格系統在項目中的靈活運用

summerpxy 發布于2019-08-29 16:05 / 2400人閱讀

摘要：前言柵格通常捆綁在各種框架中，但有時你需要自己去定制一個柵格來滿足實際的業務需要，本文聊聊柵格系統在項目中的靈活運用。

前言

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

云服務器 GPU云服務器 webrtc項目中的stl庫在哪里柵格系統原理 bootstrap柵格系統 java項目中的調度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113519.html

面試題CSS盒子模型，左右固定寬度，中間自適應的五種死法

摘要：優點相比之前布局更具有靈活性缺點脫離文檔流，下面的元素都受影響。面試題目假設高度已知，請寫出三欄布局，左右300px，中間自適應 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢？最容易的應該想到利用float來寫，代碼如下 css樣式代碼，以下五種都是用一個樣式代碼 ...

leanxi 2019-08-29 17:22 評論0 收藏0
設計架構

摘要：先來看一張系統前后端架構模型圖。一種接口的約定本文用于定義一種統一的接口設計方案，希望具有參考價值。，和都是常見的軟件架構設計模式，它通過分離關注點來改進代碼的組織方式。如何無痛降低 if else 面條代碼復雜度相信不少同學在維護老項目時，都遇到過在深深的 if else 之間糾纏的業務邏輯。面對這樣的一團亂麻，簡單粗暴地繼續增量修改常常只會讓復雜度越來越高，可讀性越來越差，有沒...

graf 2019-06-24 17:56 評論0 收藏0