前 21 個 HTML5/CSS3 網格系統和框架

就在幾年前，傳統的設計方法意味著你必須自己設計一個主頁，將線框和內容框拼接在一起，然後希望最好，但逐漸地，這種技術已經消失了，新的、更現代的快速網站開發方法已經浮現。 最值得注意的是，CSS3 引入了 Flex-box——一種易於使用的網格功能，您可以使用它來創建內容佈局，但仍然——有些是抗拒的，而另一些則採用更複雜的方法來實現絕對的設計精度。

當你打開一個新網站時，通常你會看到網站的標題部分、內容區域和側邊欄——這些主要區域還包括他們自己的設計佈局和規範，兔子洞會越來越深。 找到一種方法來設計主頁（或任何其他頁面）佈局，使其在所有媒體、設備和軟件上看起來都很好，這一點至關重要。 因此，我們認為將 CSS 和 HTML 框架和系統的集合放在一起來開發網格佈局可能對我們的開發人員很有用。

想要更多框架？ 試試我們的其他綜述：

• JavaScript 框架
• HTML5 框架
• CSS3 框架
• Node.js 框架

毋庸置疑，這些設計可以適應任何情況，因此您可以免於必須解決設計佈局本身的扭結和怪癖的麻煩，而不是專注於用您想要的內容來滿足那些網格框放在那裡。 您可以在這些網格系統中找到種類繁多的不同風格，花一些時間訪問演示頁面，甚至可以寫下您要查找的內容，以便您可以更輕鬆地找到匹配的框架滿足您的需求。

死簡單網格

網格永遠不應該是複雜的，就其真正本質而言，它們只是將整體設計組合在一起的 HTML 元素，而 Vladimir Agafonkin 是接受這一概念的開發人員之一。 他的網格框架 Dead Simple Grid 只有 200 字節的 CSS 代碼； 這是如此少量的代碼，您的頁面甚至不會注意到它的存在。如果您願意，您可以將網格分開以顯示主要內容區域和靈活的側邊欄。 這種網格適合博客和一般的主頁佈局，其中最小的設計是首選。 由於媒體查詢，響應式設計被集成，因此網格在任何使用它的設備上看起來都完美無缺。

波旁威士忌

Bourbon 是一個非常成功的用於 SASS 預處理器的 mixin 庫。 這當然使 Neat 成為那些已經使用 Bourbon 和 SASS 的人的有吸引力的選擇。 Neat 使開發人員可以訪問一個快速且易於在幾分鐘內完成設置的流體網格系統，但靈活到無限制的更改和調整不會成為問題的程度。

格

Grd 是一個 CSS 網格系統，它使用 Flexbox 作為後端工具來創建靈活和現代的響應式佈局。 使用實時演示，您可以使用設置和不同的設計自定義來查看 Grd 是否可以解決您將特定設計元素集成到現有工作流程中的問題。 我們發現僅使用設置下拉菜單即可輕鬆製作頁眉、頁腳和一般內容區域。

結構體

Structure 也基於 Flexbox，使用聲明式語法模式（類似於 Angular.js 中的那些）來定義部分和佈局參數。 一些開發人員抱怨無法驗證頁面的最終標記，但其想法是使用 Structure 您可以創建一個聲明性網格，該網格不會與傳統的 CSS 屬性（如類和標識名稱）混淆。

960網格系統

數十萬個網站已使用 Nathan Smith 的 960 Grid System 為其設計佈局提供動力。 它是簡化辛勤工作的 Web 開發人員工作流程的有效工具。 通過選擇兩種不同的列佈局（分別為 12 和 16），開發人員可以快速引導主頁，支持任何類型的動態和靜態輸入。 可以添加更多列，但您需要使用文檔來更清楚地了解使用情況。

非語義

Unsemantic 是 960 網格的後續版本，提供了完整的響應式設計功能。 通過獨特的拉取類，開發人員可以重新排列他們正在生成的頁面的佈局，這有助於在任何給定時間宣傳和展示最重要的內容，這是一種幫助搜索引擎更好地理解每個內容元素用途的已知策略。 Unsemantic 也是 Media Queries 的驕傲用戶，因此成熟的前端開發人員不會為自己的需求定制這個網格框架。

簡單網格

因此名稱，Simple Grid 適合追求簡單易用的每個人。 佈局響應迅速，與智能手機、平板電腦和台式電腦兼容。 換句話說，您的項目的性能將毫無疑問是一流的。 它也完全適合大屏幕和更高分辨率。 此外，Simple Grid 只是一個網格，沒有任何額外的資產，這使得它非常輕量級。 使用方便的十二列結構，您可以自由地創建完全符合您喜好的佈局。 您可以將其完美地分成兩列、三列、四列或六列。

csswizardry-grids

使用 HTML 網格，例如 csswizardry-grids，您可以節省時間和精力。 這是一個強大的工具，您可以準確地利用它。 它非常用戶友好且結構簡單，可確保各級 Web 開發人員充分利用它。 在上面的屏幕截圖中，您可以查看 csswizardry-grids 支持的所有不同變體。 您可以自由地重新排序東西，因此它可以將您的願望與 T 卹相匹配。 現在通過避免使用 csswizardry-grids 從頭開始執行任務來完成您的活動，並從右腳開始。

深格

Profound Grid 為您提供的自由遠不止於此。 您可以將這種靈活且可擴展的網格系統用於固定佈局和流體佈局。 結果將適用於所有現代設備，開箱即用。 您可以根據自己的喜好通過更改、刪除或添加列來創建所需的確切結構。 您可以先查看一些示例以了解 Profound Grid 的功能。 此外，由於計算列時的邊距為負，Profound Grid 保證無論屏幕大小和 Web 瀏覽器如何，流暢的佈局看起來都一樣。

干鍋

使用網格系統的好處是巨大的，因為您不僅可以節省時間，而且還不必擔心技術問題。 例如，Griddle 確保與流行的設備和網絡瀏覽器完全兼容。 這意味著，您的應用程序的性能將始終是一流的。 使用 Griddle，您可以實現從比例和嵌套網格到居中和混合單元的任何內容。 至於後者，通過一些定制，您可以將固定單元和流體單元組合在一個令人印象深刻的構建中。 您可以控制單位的水平居中，甚至可以更改垂直對齊方式。

CSS 智能電網

CSS Smart Grid 遵循最新的趨勢和法規，以確保與不同設備的兼容性。 簡而言之，該工具輕巧、響應迅速且移動優先，可讓您用它構建史詩般的東西。 無論是使用智能手機還是大型桌面屏幕，CSS Smart Grid 都能確保佈局在兩者上都能順利運行。 供您參考，即使有人使用功能手機瀏覽互聯網，您基於 CSS Smart Grid 的項目也能正常工作 - 使用單列視圖。 在官方網站上，您還可以快速了解如何使用該工具，因此您在使用該工具時不會遇到任何問題。

格萊克斯

Gridlex 確實因其出色的設計和易​​用性而脫穎而出。 這個基於 Flexbox 的網格框架的簡單性令人驚訝，其願景很簡單——將您的列包裹在您的網格中，如有必要，還可以進行任何額外的調整，以使您的最終設計看起來不可抗拒。 通過查看使用 Gridlex 的網站演示，很明顯這是一個頂級的網格系統，您不會對它為您自己的項目和工作流程所做的事情感到失望。

響應式網格系統

響應式網格系統有很多功能，完美的域名、清晰的願景和所需的工具，使響應式網格設計變得輕而易舉！ 網格生成器提供了一個簡單的表單輸入，您可以在其中指定您想要使用的列數，以及您想要在它們之間看到的邊距.. 單擊提交，您已經準備好了代碼輸出下一個響應式網格佈局。 如果您願意，作者 Graham 很樂意為您完成所有辛勤工作，您可以在頁面的頁腳與他聯繫。

網格狀

開發人員將 Gridly 構建為最小的網格佈局系統，以支持當今最現代的瀏覽器。 它的輕量級結構可幫助開發人員輕鬆地啟動和運行網格/列佈局，而不會帶來太多麻煩。 總的來說，這個庫的最小尺寸會讓你想要更多的項目。

福爾摩斯

Formstone 本身並不是一個單一的託管網格系統，它實際上是一個面向前端開發人員的庫，他們需要高度可定制的組件和 Web 元素，這些組件和 Web 元素構成了您每天遇到的傳統網頁。 作為一個模塊化、響應式和自動化的庫——Formstone 不僅可以用於擴展大型網站項目，還可以用於網格佈局本身的使用。

引導程序

如果不是因為它的網格系統是構建其他一切的基礎，那麼今天的 Bootstrap 會在哪裡？ 我們仍然熱切地等待 Bootstrap 4 的到來，但與此同時……你無法抗拒對一個已經成功將自己確立為本世紀最傑出的前端框架之一的框架說“是”。 數以百萬計的網站都由 Bootstrap 的功能提供支持，但如果沒有集成到 Bootstrap 核心中的網格框架，這一切都不可能實現。

基礎

Foundation 是另一個成功的支持響應式設計的前端庫，最新版本（Foundation 6）帶來了更多現代功能和元素，可以幫助開發人員為其客戶提供令人難以置信的多功能設計。 Foundation 提供的易於使用的模板讓您有機會從所有這些網格開發中休息一下，而是專注於重要的事情——您將要放入該網格本身的內容。

骨骼

Skeleton 擁有美麗而自然的設計，會讓您欲罷不能。 創作者形成了 Skeleton 背後的想法，成為小型項目的最佳選擇。 此外，您可以在不適合使用成熟框架的項目中使用它。 Skeleton 為您提供了啟動和運行網站原型所需的基本要素； 網格佈局，標題和部分的排版選項，滿足您所有表單需求的按鈕元素，實際上是自定義表單，因此您可以節省自己編寫代碼的時間，很好地添加了列表、表格和代碼語法，以及一個媒體查詢框架，讓您的設計變得完全響應！

響應式網格系統 2

響應式網格系統（第 2 版）是一個移動優先的網格系統，它的尺寸非常小，但風格非常有效。 您可以從一系列列佈局（24、16、12）中進行選擇。 您還可以自定義列之間的邊距和填充，並使用 polyfills 來創建一流的設計佈局。

下一個項目的響應式網格系統

下一個項目的響應式網格系統使用與 960 網格系統相同的類。 它首先為移動訪問者提供服務，並提供用於標題管理的樣板。 開發人員在所有現代瀏覽器中都對其進行了測試，因此您可以放心使用。 您可以將其用作基礎網格系統，幫助您構建響應式網頁設計。 這將保持您對流行網格系統的現有熟練程度。

HTML5 樣板

HTML5 Boilerplate 是面向前端開發人員的強大的樣板框架（模板）。 它適用於想要啟動他們的項目而不想涉及 Bootstrap 或 Foundation 等更大框架的麻煩的開發人員。