css 网格布局_CSS网格布局

css 网格布局

The

grid system is a strong, traditional design tool for presentation of visual information. Based on a table armature of regular divisions, grid systems allow for the consistent, legible, and visually pleasing presentation of graphics and text.

网格系统是一种强大的传统设计工具，用于显示视觉信息 。 基于规则分隔的表格框架，网格系统允许以一致，清晰，视觉上令人愉悦的方式呈现图形和文本。

Grid systems are not for everyone, nor are they appropriate to every design. Used well, a grid can supply boldness and readability to a design; used poorly or dogmatically, grids can make a product staid, atomized and confusing.

网格系统不适合每个人，也不适合每个设计。 如果使用得当，网格可以为设计提供醒目性和可读性。 格栅使用不当或教条化会使产品失稳，雾化并造成混乱。

Traditionally, grids have been used in areas for which media size and scale are fixed: books, magazines, posters and newspapers. CSS has been slowly taking on the complex task of supporting grids for the web through the development of the Grid Positioning and Template Layout Module. As of this writing, only IE10 supports these proposals, which are in “working draft” format and still subject to change.

传统上，网格用于固定媒体大小和比例的区域：书籍，杂志，海报和报纸。 通过开发“ 网格定位和模板布局模块”，CSS一直在缓慢地承担着支持网络网格的复杂任务。 在撰写本文时，只有IE10支持这些建议，这些建议处于“工作草案”格式，并且可能随时更改。

Designers frustrated with the lack of grid support on the web have typically taken one of three routes as their solution:

对于缺乏网格支持的设计人员来说，通常采用以下三种方法之一作为其解决方案：

1. Especially in the first decade of the web (but still, sadly, continuing) designers have used <table> markup in an attempt to position text and graphics on a page. As we have discussed, this approach is non-semantic (tables should only ever be used for tabular data) and extremely difficult to modify.

   尤其是在网络的头十年(但仍然令人遗憾的是，仍在继续)中，设计师使用<table>标记来尝试在页面上放置文本和图形。 正如我们所讨论的，这种方法是非语义的(表仅应用于表格数据)，并且极难修改。

2. In the latter half of the web’s development, absolutely positioned elements, usually divs, have been used to arrange content across a grid. These also have their drawbacks: they are non-semantic, difficult to adjust, and fixed.
   在网络开发的后半部分，绝对定位的元素(通常为div)已用于在网格上排列内容。 这些也有它们的缺点：它们是非语义的，难以调整和固定的。

3. • Like DreamWeaver and other tools, they all tend to separate the user from the code, to the point that design questions become “What button do I push to make things look this way?” rather than asking “What methods can I use to achieve this effect/layout?”

     像DreamWeaver和其他工具一样，它们都倾向于将用户与代码分开，以至于设计问题变成“我按什么按钮使事物看起来像这样？” 而不是问“我可以使用什么方法来实现这种效果/布局？”

   • Because designers are using the same tool, rather than relying on an understanding of underlying principles, the results tend to come out looking somewhat similar. That’s not to say that they have to – a well-designed grid template has enough possibilities to accept a great many different designs – only that the tendency is there. Resultant designs also tend to be created that exist within the limited solution-space and abilities of the tool, rather than from the full range of design possibilities.

     因为设计人员使用的是相同的工具，而不是依赖于对基本原理的理解，所以结果看起来似乎有些相似。 这并不是说他们必须 -设计良好的网格模板具有足够的可能性来接受很多不同的设计-只是存在这种趋势。 最终的设计往往倾向于存在于有限的解决方案空间和工具的能力之内，而不是来自全部设计可能性。

   • Like DreamWeaver, the tools tend to produce non-semantic, difficult-to-understand code.
     与DreamWeaver一样，这些工具倾向于生成非语义的，难以理解的代码。
   • Again like DreamWeaver, reliance on a tool that produces code which is only usable in the presence of that tool is, generally speaking, a bad idea. Take away an understanding of 960 Grid code, for instance, and the markup and CSS no longer make sense.
     与DreamWeaver一样，再次依赖于生成仅在存在该工具的情况下才可用的代码的工具是一个坏主意。 例如，如果您不了解960 Grid代码，那么标记和CSS就不再有意义。

   More recently, JavaScript and CSS frameworks such as the 960 Grid System, Blueprint, YUI and YAML have attempted to create simplified CSS systems that rely on an implied grid. While they are all good tools in the hands of professionals, they have drawbacks of their own:

   最近， JavaScript和CSS框架 (如960 Grid System ， Blueprint ， YUI和YAML)已尝试创建依赖于隐式网格的简化CSS系统。 虽然它们都是专业人员掌握的好工具，但它们也有缺点：

For rapid prototyping or the very quick creation of templates, CSS frameworks are a godsend, but I would leave them until you have a strong understanding of CSS itself.

对于快速原型设计或模板的快速创建，CSS框架是天赐的礼物，但是除非您对CSS本身有深刻的了解，否则我将保留它们。

更多资源 (Further Resources)

GuideGuide and GridSet are useful PhotoShop plugins for creating grid systems for mockups.

GuideGuide和GridSet是有用的PhotoShop插件，用于为模型创建网格系统。

翻译自: https://thenewcode.com/83/CSS-Grid-Layouts

css 网格布局