本文是在MightyDeals的帮助下为您提供的
MightyDeals为网页设计师和开发人员提供每日交易。他们会抓到你的折扣高达97%为网络专业人士提供的产品和服务。阅读MightyDeals
1.骨架
Skeleton是一个CSS文件的集合,为需要快速生成响应网格布局的web设计师提供。不仅仅是一个网格系统,Skeleton还提供了一些基本的功能来处理常见的web布局任务,如CSS重置以规范化您的CSS。
2.整洁的
Neat网格框架的主要目标是通过使用促进干净的语义HTML标记萨斯Mixins以避免过多的表示类和包装div
元素。通过阅读他们的,开始使用Neat文档学习一些例子.
3.简单的网格
如果你是一个极简主义者,那么Simple Grid是一个值得一试的系统,因为它旨在为你提供创建响应式CSS网格布局所需的最低限度。此外,1140px是Simple Grid的基础宽度,而不是更常见的1024px,因为Simple Grid创建者认为我们已经超越了这种惯例。
4.csswizardry-grids
这个响应式网格系统的方法是设计网页布局手机第一.类似于前面讨论的Neat哲学,如果您担心用过多的表示CSS类填充标记,那么您可以选择使用Sass的@extend
功能与csswizardry网格。
5.深刻的网格
Profound Grid的一个独特特性是,它可以精确地在它所支持的所有浏览器中呈现流体网格布局。这个响应迅速的CSS网格系统是如何实现这样的壮举的?用负边距计算柱的尺寸。
6.烤盘
Griddle是网页设计师和网站的重点现代浏览器.这个CSS网格系统是使用Sass函数和mixins生成的。它利用了CSS的强大功能inline-block
而且box-sizing
属性,它为布局提供了一些传统的基于浮动的布局所不能提供的新功能。
7.额外强度响应网格
如果你觉得其他CSS网格系统太过约束,如果你的首要任务是控制响应式布局如何适应用户的查看屏幕,如果你在意标记中命名良好的CSS类,你绝对需要看看Extra Strength responsive Grids。
8.成比例的网格
这个CSS网格解决方案解决了当我们缩放布局时经常出现的问题;在不同的观看情况下,水槽的尺寸不成比例。比例网格允许您使用固定单位的水槽测量,同时仍然能够有流体柱。
9.超简单网格
这个CSS网格是一个轻量级的,只有250字节。如果你只想要一个简单的响应网格,而不是别的,如果你非常关心前端web性能,那么这个只有两个CSS类的小网格框架就是满足你需求的门票。
10.响应式网格系统
与其他CSS网格系统相比,响应式网格系统为您提供了更多的灵活性,因为它允许您选择使用任意数量的列。如果您走这条路,请告别限制性的独裁12列或16列网格系统。
11.rwdgrid
如果你熟悉并熟悉最流行的网格系统,960网格系统,那么rwdgrid——一个响应式CSS网格,使用960网格系统的语法和哲学——值得一个高峰。
12.CSS智能电网
CSS智能电网建立在960网格系统的基础上,首先使用移动响应的方法来布局网格。哦,它只有1.2KB。
13.僵局
Gridlock通过颠覆典型的响应式网页设计,展示了一种真正的移动优先的网页设计方法媒体查询逻辑——它不会将“桌面版”CSS属性应用到你的HTML元素上,除非它们是需要的,因此可能会在移动浏览器上提高一点点渲染速度(因为浏览器不需要覆盖任何针对桌面屏幕的样式规则)。
响应式CSS网格系统对比表
网站 | 回购 | 许可证 | 贡献者* | * *感兴趣 | 文档 | 推特 | 创始人 |
骨架 | GitHub | 麻省理工学院 | 14 | 3797年 | 框架文档 | @dhg6710年 | 戴夫Gamache |
整洁的 | GitHub | 麻省理工学院 | 12 | 910 | 整洁的文档 | @kaishin724 | 里达Lemeden,凯尔·菲德勒 |
简单的网格 | GitHub | 未知的 | 1 | 753 | Simple Grid文档 | Uknown | ThisIsDallas |
csswizardry-grids | GitHub | Uknown | 2 | 438 | csswizardry-grids文档 | @csswizardry23145年 | 哈利罗伯茨 |
深刻的网格 | GitHub | WTFPL | 1 | 415 | 深刻的Grid文档 | @weareprofound72 | 深刻的 |
烤盘 | GitHub | 麻省理工学院 | 2 | 266 | 烤盘文档 | @necolas15293年 | 尼古拉斯·加拉格尔 |
额外强度响应网格 | GitHub | 双:麻省理工学院和GPL | 2 | 201 | 自我记录 | @johnpolacek4188年@tsvensen234 | 约翰Polacek,蒂姆·斯文森,安德鲁·普利 |
成比例的网格 | GitHub | 未知的 | 1 | 155 | 比例网格文档 | @mattberridge898 | 马特Berridge |
超简单网格 | GitHub | 免费的 | 1 | 148 | Dead Simple Grid文档 | @mourner1073年 | 弗拉基米尔•Agafonkin |
响应式网格系统 | GitHub | 知识共享 | 1 | 86 | 响应网格系统文档 | @graham_r_miller990 | 格雷厄姆·米勒 |
rwdgrid | GitHub | WTFPL | 2 | 83 | 自我记录 | 未知的 | 温尼斯 |
CSS智能电网 | GitHub | BSD | 1 | 64 | CSS智能电网文档 | @dryan2188年 | 丹尼尔·瑞恩 |
僵局 | GitHub | 麻省理工学院 | 1 | 13 | 僵局文档 | @benplum264 | 本梅 |
*贡献者是为GitHub上的开源项目做出贡献的人数。* *感兴趣是项目仓库在GitHub上的观察者数量。
你用什么响应式CSS网格?
你使用响应式CSS网格系统吗?在评论中讨论吧!