previous three articles, the clear grid system design details and scope of application.This one will focus on the 960 grid system technology.

Blueprint implementation

Blueprint is a complete CSS framework, the grid system is a part of its function.Let's demo page:

more than three-column layout of the code:

the above basic functions, Blueprint also supports append-n, prepend-m, border and other "advanced" feature, which is not smallsaid.Blueprint of the features of a brief summary is as follows :

  1. floating to achieve the layout is simple
  2. 950 on both sides did notmargin, the last column of the class need to add last
  3. use of additional labels to remove the float

960.gs implementation

about 960 grid systems, must be mentioned 960.gs. Nathan Smith in this article, detailed his ideas and design ideas.Here's a demo page, the core code is very simple:

above on how to construct a three-column layout:

interesting points:

  1. margin is uniform on the 950 on both sides
  2. In addition to all the grid width is different from left and right margins are unanimous in margin: 0 10px;

is clear, Blueprint, and 960.gs are based on the float to achieve the layout, the main container will need to add additional labels toClear floating (you can refer to here).Of course, this is not a big problem, see a summary of this article does not add additional tags can also clear the float.

YUI implementation

and then look at the famous YUI Grids CSS. YUI's CSS framework consists of three documents form: 

 reset.css - Style Resetfonts.css - Layout font control grids.css - Grid Systems

us from demo started:

attention, demo linkThe width is 750, but we simply the id changed doc2 , page width would automatically become 950 width of the (YUI very strong ^ o ^).Look at the dom structure:

is also used in the floating layout, streamlined CSS code:

YUI is characterized by:

  1. is still a floating layout, slot (Gutter) wide by margin-left to control (Blueprint adopted right away, 960.gs use of sharing, the three frameworks for the treatment tank is really interesting)
  2. total width of the use of em, so can be used in flexible layout "/li>
  3. column layout using a percentage, using fluid layout

YUI has the advantage of adaptive layout can be used to do, in this framework the first two are not.But the ordinary fixed-width layout, YUI which seems a bit cumbersome, such as we are to achieve the layout of four columns, dom was written like this:

first-come, 2 2column layout, and then subdivided into four column layout, clarity on the poor.

more grid to achieve

more of a grid-based layout ideas to realize technology can vary widely.Example, the pseudo-emerge this year, the absolute positioning, immediately can be used to achieve the grid system.Ming City brothers had tried one.

sure there are a lot of grid-based implementations, where 11 is not excavated.

Flying wing grid system

very strange name?Please read this article: progressive enhanced layout to explore. Simply put, Flying wing layout is a layout of implementation technology, we can use it to achieve a set of grid system.

look at the test page: Grids Layout Test.

progressive increase in the specific technical details of the layout of a text has been dealt with, not repeated here.A few points need to explain:

  1. The grid system and can not be realized all the layouts.This is similar to YUI Grids can only strive to achieve some of the layout.Example, three-column layout, now only joined 5: 13: 6, 5: 12: 7, 9: 9: 6, 8: 8: 8 4 kinds of circumstances, which is available from the pages Taobao analysis summed up.For the same site, the too many different three-column ratio is not a good thing (now a little more than Taobao, the future may also be further harmonization).Therefore, if using this grid system, then need to analyze site, defining a set of appropriate ratio.Here is a proportion of the auto-generation tool of all: grids_css_generator.html.
  2. on naming: . Grid-c2-s6 that two columns ( c2: column 2 ) layout, sub column width is 4 ( s4: sub width is 4 * 40 -10 ). but . grid-c2-s6f , the final f that two-column layout of the second case, that is, sub and main interchangeable.Similarly, . Grid-c3-s5e6d , said three-column layout, where sub column width is 5, extra column width is 6,The final d that is s5e6 three-column layout in the fourth case.
  3. In order to facilitate the use of the most commonly used two columns layout . grid-c2-s5 to use . grid-c2 directly expressed.Similarly, . Grid-c3 that . Grid-c3-s5e6 . This is the default value of Taobao, other sites can be modified according to actual conditions.
  4. this layout in line with progressive enhanced workflow.Careful you may have found that all two-column layout and a three-column layout, HTML in the DOM structure is exactly the same, only the outermost div of the class different.So if you want to exchange column, as long as a very simple modification of the next class can be.
  5. actual use, two-column layout and a three-column layout has been enough.In fact, with the two columns, other layouts can be combined to come out.Here is a tentative page: grids_test4_v0.1.html. Combination of layout look great, but the real question will engage in a complex use is not recommended to use, simply forget the bar.

last look at the two test pages: 2 column layout grid-c2_test.html and three-column layout grid-c3_test.html.

Currently, in addition found in ie6under a bug (Large pictures will hang chaotic layout, in fact, can be overflow: hidden to resolve, but considering overflow of the negative impact of the end or by the internal layout of the modulethe good from the main control), have not yet found other issues.

Summary

grid system is more of a layout idea, in actual use, in accordance with the specific needs of the appropriate choice of technology to achieve can be.Should be noted that, for grid technology is too flexible and not necessarily a good thing, the most appropriate degree of flexibility rare.How to moderate it?This requires constant reflection on madness practice + + refactoring + Gordon continued ...

improtance the page grid framework, the next important thing is that puts inside the content of the module.Standardized so that the content of the module, so that the page is generated industrialization, for large sites, this is the grid system, the most commercial value.Next is the final one in this series will demonstrate the application of the modular grid system.

Tags: Grid, Grid


This chapterfrom the:Design and Material (http://www.q60.org),copy Please keep this line.