Web Grid system Research (4): Technology implementation

In the first three articles, the design details and application scope of the grid system are clarified. This article will focus on the technical implementation of the 960 grid system.

The realization of Blueprint

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

The above three column layout code is:

<style type= "Text/css" >
    container {margin:0 auto; width:950px}
    . span-8 {float:left; margin-right:10p X}
    div.last {margin-right:0}
    hr {clear:both; height:0 border:none}
</style>
<div class= "Container" >
    <div class= "span-8" ></div>
    <div class= "span-8" ></div>
    < Div class= "Span-8 last" ></div>
    
 
The above is the basic function, blueprint also supports append-n, prepend-m, border the "advanced" function, these will not elaborate. The characteristics of blueprint are summarized as follows:
 

 

 
  
 
   
The use of floating to achieve the layout, simple and clear
 
   
9,502 side without margin, the last column of class needs to be addedlast
 
   
Use extra tags to clear floating
 
  

 
 
Implementation of 960.GS
 
When it comes to the 960 grid system, 960.GS has to be mentioned. In this article, Nathan Smith elaborates on his ideas and design ideas. Here is a demo page, the core code is simple:
 
<style type= "Text/css" >
    Container_12 {margin:0 auto; width:960px}
    . grid_4 {float:left; margin:0 10px }
</style>
<div class= "Container_12" >
    <div class= "Grid_4" ></div>
    <div class= "Grid_4" ></div>
    <div class= "Grid_4" ></div>
    <div class= "Clear" ></div >
</div>
 
A three-column layout is built above:

Interesting points:
 

 

 
  
 
   
The margin is evenly placed on the 9,502 side.
 
   
All grid except the width is different, the left and right margins are consistentmargin: 0 10px;
 
   
Code is simple and clear, starting and ending columns do not need to add extra class
 
  

 
 
Obviously, the blueprint and 960.gs are all floating to achieve the layout, and the main container needs to add extra tags to clear the float (refer to here). Of course, this is not a big problem, please see the summary of this article, do not add additional tags can also clear the float.
 
The realization of Yui
 
Then look at the famous Yui Grids CSS. Yui's CSS framework consists of three files:
 
RESET.CSS-style reset
fonts.css-Typography font control
grids.css-grid system
 
Let's start with the demo:

Note that the demo link in the width is 750, but we only have to <div id="doc"></div> change the ID doc2 , the page width will automatically become 950 wide (Yui very powerful ^o^). Look at the DOM structure:

Also used is a floating layout, the simplified CSS code is:
 
<style type= "Text/css" >
    doc2 {margin:auto; Width:73.076em}
    . yui-u {float:left; margin-left:1.99%; wi dth:32%}
    div.first {margin-left:0}
    #ft {clear:both}
</style>
 
Yui's characteristics are:
 

 

 
  
 
   
Still uses the floating layout, the trough (gutter) Width passes margin-left to control (blueprint uses the right margin, the 960.gs uses the equalization, these three frames to the trough processing is really interesting)
 
   
The total width adopts em, which can be used in elastic layout
 
   
The layout of the column is in percent, using a fluid layout
 
  

 
 
Yui's advantage is that can be used to do adaptive layout, in the first two frames is not. But the general layout, Yui is a little trouble, such as we want to implement four-column layout, Dom has to write:

First to two two columns layout, and then subdivided into four columns layout, poor clarity.
 
More Grid implementations
 
Raster is more of a layout idea, the implementation of technology can vary. This year, for example, the pseudo absolute positioning, can immediately be used to implement the grid system. The Mingcheng brothers tried one.
 
There must be a lot of grid implementations, and there's no digging.
 
Double-winged Grid system
 
That's a strange name? Read this article first: Explore the incremental-enhanced layout. In short, the dual wing layout is a layout implementation technology that can be used to implement a grid system.
 
First look at the test page: Grids Layout test.
 
Specific technical details in the step-by-step enhanced layout of the article has been elaborated, this is not repeated here. There are several points to note:
 

 
 
 
  

  
This grid system does not implement all layouts. This and Yui grids similar, can only achieve a predetermined number of layouts. For example, three column layout, currently only joined the 5:13:6, 5:12:7, 9:9: 6, 8:8: 84, this is from the existing page of Taobao analysis summed up. For the same site, too many different three-column ratio is not good (Taobao is now a bit more, may be further unified later). So if you use this grid system, you need to analyze the site first, define a set of appropriate proportions. Here's an automatic generation tool for all ratios: grids_css_generator.html.
 
 
  

  
About naming: .grid-c2-s6 represents a two-column () layout with a column c2: column 2 sub width of 4 columns ( s4: sub width is 4 * 40 -10 ). and .grid-c2-s6f , finally, f represents the second case of the two-column layout, that is, sub and the main interchange. Similarly, the .grid-c3-s5e6d three-column layout, where the width of the sub column is 5, the width of the extra column is 6, and the final d representation is s5e6 the fourth of the three-column layout.
 
 
  

  
For ease of use, the most commonly used two-column layouts are .grid-c2-s5 .grid-c2 represented directly. Again, .grid-c3 .grid-c3-s5e6 This is the default value of Taobao, other sites can be modified according to the actual situation.
 
 
  

  
This set of layouts conforms to a step-by-step enhanced workflow process. Careful you may have found that all two-column layout and three-column layout, HTML in the DOM structure is exactly the same, only the outermost layer div of the class difference. If you want to swap the left and right columns, as long as the very simple changes class can be.
 
 
  

  
When actually used, the two-column layout and three-column layout are sufficient. In fact, there are two columns, the other layout can be combined out. Here's a tentative page: grids_test4_v0.1.html. The combination layout looks strong, but when it is actually used it complicates the problem and is not recommended, simply forget it.
 

 
 
Finally, look at the two test pages: two-column layout grid-c2_test.html and three-column layout grid-c3_test.html.
 
At present, in addition to the discovery of a bug in the IE6 (oversized pictures and so on will support chaos layout, in fact, can be used overflow: hidden to solve, but overflow the negative impact of consideration, finally, by the layout of the internal module to control the good), has not found other problems.
 
Summary
 
Grid system is more of a layout idea, in the actual use, according to the specific needs of the selection of appropriate technology to achieve. It is important to note that for the technical implementation of the grid, too flexible is not necessarily a good thing, moderate flexibility is the most rare. How to moderate it? This requires crazy practice + continuous reflection + continuous reconstruction + awareness ...
 
The grid frames the page, and the next important thing is to add content modules to it. Let the content module standardize, let the page generate industrialization, for large sites, this is the grid system the most commercially valuable place. The next one is also the last one in this series will show modular applications in grid systems.