20个优秀的 CSS 网格系统（CSS Grid Systems）推荐

浅浅的花香味﹌ 2022-05-14 01:18 196阅读 0赞

在制作网站的时候，你必须要确保有一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法。借助这个工具，设计师可以根据预制结构进行布局，节省了大量的时间和精力。今天这篇文章向大家推荐20个优秀的 CSS 网格系统，其中还有融合了最新的响应式设计理念的响应式 CSS 网格系统。

### 1. [Less Framework 4][] ###

[![Less Framework 4][Less Framework 4 1]][Less Framework 4]

### 2. [Golden Grid System][] ###

[![Golden Grid System][Golden Grid System 1]][Golden Grid System]

### 3. [CSSgrid][] ###

[![CSSgrid][CSSgrid 1]][CSSgrid]

### 4. [Get Skeleton][] ###

[![Get Skeleton][Get Skeleton 1]][Get Skeleton]

### 5. [inuit CSS][] ###

[![inuit CSS][inuit CSS 1]][inuit CSS]

### 6. [Fluid Base Line Grid][] ###

[![Fluid Base Line Grid][Fluid Base Line Grid 1]][Fluid Base Line Grid]

### 7. [978.gs][] ###

[![978.gs][978.gs 1]][978.gs]

### 8. [BluCSS][] ###

[![BluCSS][BluCSS 1]][BluCSS]

### 9. [Columnal][] ###

[![Columnal][Columnal 1]][Columnal]

### 10. [960.gs][] ###

[![960.gs][960.gs 1]][960.gs]

### 11. [hashGrid][] ###

[![hashGrid][hashGrid 1]][hashGrid]

### 12. [Fluid 960gs][] ###

[![Fluid 960gs][Fluid 960gs 1]][Fluid 960gs]

梦想天空博客关注[前端开发][Link 1]，展示最新[HTML5][]和[CSS3][]应用，分享[jQuery][]插件，推荐优秀[网页设计][Link 2]案例。

### 13. [Blue Trip CSS Framework][] ###

[![Blue Trip CSS Framework][Blue Trip CSS Framework 1]][Blue Trip CSS Framework]

### 14. [1kb Grid][] ###

[![1kb Grid][1kb Grid 1]][1kb Grid]

### 15. [Fluid Grid][] ###

[![Fluid Grid][Fluid Grid 1]][Fluid Grid]

### 16. [Blueprint CSS][] ###

[![Blueprint CSS][Blueprint CSS 1]][Blueprint CSS]

### 17. [52 Framework][] ###

[![52 Framework][52 Framework 1]][52 Framework]

### 18. [Sampson Videos][] ###

[![Sampson Videos][Sampson Videos 1]][Sampson Videos]

### 19. [Not Just a Grid][] ###

[![Not Just a Grid][Not Just a Grid 1]][Not Just a Grid]

### 20. [Baseline CSS][] ###

[![Baseline CSS][Baseline CSS 1]][Baseline CSS]

[Less Framework 4]: /images/20220514/e9002f0f5bf34b14accc4f981228b952.png
[Less Framework 4 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_1.jpg
[Golden Grid System]: http://goldengridsystem.com/
[Golden Grid System 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_2.jpg
[CSSgrid]: http://cssgrid.net/
[CSSgrid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_3.jpg
[Get Skeleton]: /images/20220514/fac000b00e744276b8115138614bf7c9.png
[Get Skeleton 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_4.jpg
[inuit CSS]: http://csswizardry.com/inuitcss/
[inuit CSS 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_5.jpg
[Fluid Base Line Grid]: http://fluidbaselinegrid.com/
[Fluid Base Line Grid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_6.jpg
[978.gs]: http://978.gs/
[978.gs 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_7.jpg
[BluCSS]: /images/20220514/b7b3f6cab4544d54b6997a61c16a04a2.png
[BluCSS 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_8.jpg
[Columnal]: /images/20220514/eedd47ea103346c28090510e8fc85ddb.png
[Columnal 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_9.jpg
[960.gs]: /images/20220514/96cfa9f90d9c453da21726071bdb778f.png
[960.gs 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_10.jpg
[hashGrid]: http://hashgrid.com/
[hashGrid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_11.jpg
[Fluid 960gs]: /images/20220514/4c9dbaaccead46be872270d8f213b57d.png
[Fluid 960gs 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_12.jpg
[Link 1]: http://www.cnblogs.com/lhb25/
[HTML5]: http://www.cnblogs.com/lhb25/tag/HTML5/
[CSS3]: http://www.cnblogs.com/lhb25/category/146075.html
[jQuery]: http://www.cnblogs.com/lhb25/category/277997.html
[Link 2]: http://www.cnblogs.com/lhb25/category/279316.html
[Blue Trip CSS Framework]: http://bluetrip.org/
[Blue Trip CSS Framework 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_13.jpg
[1kb Grid]: /images/20220514/1e693ed1ff424e0ca06b452e44aecc72.png
[1kb Grid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_14.jpg
[Fluid Grid]: /images/20220514/ccea190c346649da97b04481bc38f9c4.png
[Fluid Grid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_15.jpg
[Blueprint CSS]: /images/20220514/0d85714690104ada888d55d49dacd359.png
[Blueprint CSS 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_16.jpg
[52 Framework]: http://www.52framework.com/
[52 Framework 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_17.jpg
[Sampson Videos]: /images/20220514/b985f55b87bb44af91000323e7ce211d.png
[Sampson Videos 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_18.jpg
[Not Just a Grid]: /images/20220514/5a07ca786cc74526b3cdf79c68628955.png
[Not Just a Grid 1]: http://webdesignhabits.com/wp-content/uploads/2011/10/post_6_19.jpg
[Baseline CSS]: http://baselinecss.com/
[Baseline CSS 1]: http://pic002.cnblogs.com/images/2011/36987/2011122823115694.jpg