thinkcq’s blog

一些有用的链接:

• Subtraction: Grid Computing… and Design
• TutorialBlog - Web Design Grid System Links
• Design Grid Systems by Mark Boulton
• Smashing Magazine - Designing with Grid-Based Approach
• Mezzoblue - Columns and Grids
• Design by Grid (gallery site)

CSS Grid Framework

CSS Frameworks and Tools

下面是一些流行的CSS栅格布局框架.

1. Blueprint CSS Grid Framework. 版本尽管只有0.7,但它非常强壮. 由许多的设计师与大量的工具生成CSS代码（超出标准的24栏950px框架). 也支持使用Blueprint插件.

2.Yahoo! YUI Grids CSS, Grids Builder. 这个框架早于Blueprint的CSS Grid Framework. 附带预置的6个模板和4个框架宽度，并且布局可以兼容IAB广告单元规范. YUI Grids CSS还整合了Yahoo! UI (User Interface) Library.

3. YAML, YAML Builder. YAML (Yet Another Multicolumn Layout), 一个快速分栏布局并生成符合Web标准的CSS代码工具，看起来比较易于使用。

4. Grid Designer.  这是一个生成CSS化栅格系统的Web 工具，使用自己的CSS类，可以成为CSS框架，虽然它不能很好支持设计团体中的其他一些人。但它的优点在于栅格布局功能非常强大，设置灵活，可以设置栏数、宽度、分割条、页边空白的数值，生成合理的框架布局，对于需要高度自定义栅格系统的设计师非常有用。

5. 960 CSS Grid System, 这个系统是基于页面宽度为960px之上的 ，只有12栏与16栏的栅格划分，当页面宽度为960px时非常适用，但对于其他页面宽度就无能为力了。

6. CSS Boilerplate, 剥离于Blueprint的一个css框架，比较简单，下载直接得到CSS代码.

7. Sparkl, 文档说可以创建1栏、2栏、3栏页面布局，然后从范例与其结构来看灵活性太低。

W3C起草的 CSS Grid Positioning Module Level 3(作者是微软的员工）。

相关工具：

1. Blueprint CSS AIR Grid Tool.
2. Blueprint CSS Quick Reference (PDF, 1 page).
3. CSS Grid Calculator.
4. Diagnostic CSS.
5. Reset CSS.

一些有关CSS Grid Frameworks的文章与网站

Here are links to a few of the many great articles out there about CSS Grids.

1. 456 Berea Street - Grids, Tables, CSS.
2. A List Apart - Thinking Outside the Grid, Setting Type on the Web to a Baseline Grid.
3. Olav Bjørkøy - Launch: Blueprint, a CSS Framework.
4. Mark Boulton’s 5-part series, Five Simple Steps to Designing Grid Systems.
5. Jeff Croft - What’s Not to Love About CSS Frameworks?
6. CSS Demos - Hands on With Blueprint, a CSS Framework.
7. CSS Tricks - GridControl.
8. Design by Grid.
9. Cameron Moll - Gridding the 960.
10. Smashing Magazine - Design With Grid-Based Approach, Six Creative Column Techniques.
11. Stone Mind - First Impressions of the Blueprint CSS Framework.
12. Subtraction - Oh Yeeaahh! (or How to Use Grid in a Layout)
13. Tutorial Blog.
14. Vandelay Design - 65 Resources for Grid-Based Design.
15. W3 - CSS and Grid Layout.
16. Web Designer Wall - Grid and Column Designs.

栅格系统相关书籍：

1. Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung (Hardcover)
   

2. Making and Breaking the Grid: A Graphic Design Layout Workshop
   

3. Grid Systems: Principles of Organizing Type
   

4. 栅格系统与版式设计