分享簡化您的設計過程的CSS網格系統

文章目錄

•  

在進行CSS設計編碼市，如果沒有良好的工具每次都自己寫一大推代碼不僅費時而且費力。因此有一個好的工具，可以協助開發人員簡化設計過程，大大提高工作效率，

在這篇文章中我分享一些專註於CSS網格和預建的CSS網格模板系統。這些網格系統都是實用易用的，平常在我設計網站時總是使用這些網格。如果你使用過其中一種，你可以嘗試下面的其他幾種

 

960 Grid System

960 Grid System為了簡化Web開發工作流程提供了常用的尺寸，使用它能有效簡化美工的操作。

 

Grid System Generator

grid system generator允許你建立自訂網格系統。

 

Tiny Fluid Grid

一個漂亮的使用者介面和工具，Tiny Fluid Grid附帶一個index.html示範代碼，包含CSS所建立的網格代碼。

 

1kb CSS Grid

 

CSS 架構逐漸層得流行，其中的一些，如 BluePrints, YUI, YAML 等想去實現所有的東西，如網格系統，樣式重設，基本板式，表單樣式，其他的僅僅關注網格，但是還是顯得臃腫，最後加上複雜性，這樣只會使學習曲線變得陡峭，和增加開發時間，以及無窮的調試。所以如果你僅僅需要一個輕量級的 CSS 網格系統，來構建你網站的主架構，那麼你可以嘗試下 1Kb CSS Grid。1KB CSS Grid 網站上提供了一個產生器用來定製 CSS 網格，並且可以直接下載定製好的 CSS 網格。

 

NP Grid Generator

Grid Generator允許你指定列的寬度和裝訂邊寬度等常用的參數來設計自己的網格。

Gridr Buildrrr

允許你建立你自己的網格，通過指定列的寬度和列數。

 

The Square Grid

設計人員和開發人員的一個簡單的 CSS架構  特點：在35個等寬列的基礎上建立。目的是減少開發時間，協助您建立美麗結構的網站。

 

jQuery Masonry

Masonry是 一款非常強大的jQuery動態格線布局外掛程式，可以協助開發人員快速開發類似剪貼畫的介面效果。和CSS中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用Masonry則垂直排列元素，然後將下一個元素放置到網格中的下一個開發地區。這種效果可以最小化處理 不同高度的元素在垂直方向的間隙。

 

The Simpler 940px Grid

hide