前 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 等更大框架的麻烦的开发人员。