13个响应最快的CSS网格系统

Trevin是WebFX业务开发的高级总监。他参与了450多个营销活动,并在20多年的时间里创建了网站。他的作品被搜索引擎之地,今日美国,快速公司和公司推荐。

本文是在MightyDeals的帮助下为您提供的

MightyDeals为网页设计师和开发人员提供每日交易。他们会抓到你的折扣高达97%为网络专业人士提供的产品和服务。阅读MightyDeals

1.骨架

响应式CSS网格:框架Skeleton是一个CSS文件的集合,为需要快速生成响应网格布局的web设计师提供。不仅仅是一个网格系统,Skeleton还提供了一些基本的功能来处理常见的web布局任务,如CSS重置以规范化您的CSS。

2.整洁的

响应式CSS网格:整洁Neat网格框架的主要目标是通过使用促进干净的语义HTML标记萨斯Mixins以避免过多的表示类和包装div元素。通过阅读他们的,开始使用Neat文档学习一些例子

3.简单的网格

响应式CSS网格:简单网格如果你是一个极简主义者,那么Simple Grid是一个值得一试的系统,因为它旨在为你提供创建响应式CSS网格布局所需的最低限度。此外,1140px是Simple Grid的基础宽度,而不是更常见的1024px,因为Simple Grid创建者认为我们已经超越了这种惯例。

4.csswizardry-grids

响应式CSS网格:csswizardry-grids这个响应式网格系统的方法是设计网页布局手机第一.类似于前面讨论的Neat哲学,如果您担心用过多的表示CSS类填充标记,那么您可以选择使用Sass的@extend功能与csswizardry网格。

5.深刻的网格

响应式CSS网格:深度网格Profound Grid的一个独特特性是,它可以精确地在它所支持的所有浏览器中呈现流体网格布局。这个响应迅速的CSS网格系统是如何实现这样的壮举的?用负边距计算柱的尺寸。

6.烤盘

响应式CSS网格:GriddleGriddle是网页设计师和网站的重点现代浏览器.这个CSS网格系统是使用Sass函数和mixins生成的。它利用了CSS的强大功能inline-block而且box-sizing属性,它为布局提供了一些传统的基于浮动的布局所不能提供的新功能。

7.额外强度响应网格

响应式CSS网格:额外强度响应式网格如果你觉得其他CSS网格系统太过约束,如果你的首要任务是控制响应式布局如何适应用户的查看屏幕,如果你在意标记中命名良好的CSS类,你绝对需要看看Extra Strength responsive Grids。

8.成比例的网格

响应式CSS网格:比例网格这个CSS网格解决方案解决了当我们缩放布局时经常出现的问题;在不同的观看情况下,水槽的尺寸不成比例。比例网格允许您使用固定单位的水槽测量,同时仍然能够有流体柱。

9.超简单网格

响应式CSS网格:死简单网格这个CSS网格是一个轻量级的,只有250字节。如果你只想要一个简单的响应网格,而不是别的,如果你非常关心前端web性能,那么这个只有两个CSS类的小网格框架就是满足你需求的门票。

10.响应式网格系统

响应式CSS网格:响应式网格系统与其他CSS网格系统相比,响应式网格系统为您提供了更多的灵活性,因为它允许您选择使用任意数量的列。如果您走这条路,请告别限制性的独裁12列或16列网格系统。

11.rwdgrid

响应式CSS网格:rwdgrid如果你熟悉并熟悉最流行的网格系统,960网格系统,那么rwdgrid——一个响应式CSS网格,使用960网格系统的语法和哲学——值得一个高峰。

12.CSS智能电网

响应式CSS网格:CSS智能网格CSS智能电网建立在960网格系统的基础上,首先使用移动响应的方法来布局网格。哦,它只有1.2KB。

13.僵局

响应式CSS网格:GridlockGridlock通过颠覆典型的响应式网页设计,展示了一种真正的移动优先的网页设计方法媒体查询逻辑——它不会将“桌面版”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网格系统吗?在评论中讨论吧!

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!