Technology realization of Web grid system research

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

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:10px} 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> <hr/> </div>

The above is the basic function, blueprint also supports Append-n, prepend-m, border and so on "advanced" function, these do 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 added

Use extra tags to clear floating

960.GS implementation

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:

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 consistent margin: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 width is 750, but we only need to change the ID of <div id= "Doc" ></div> to 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% } div.first {margin-left:0} #ft {Clear:both} </style>

Yui's characteristics are:

is still the use of floating layout, groove (gutter) width through the margin-left to control (blueprint using the right margin, 960.gs to use the average, these three frames for the groove 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, immediately can 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

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 suitable proportion. There is an automatic generation tool for all ratios: grids_css_generator.html.

About naming:. GRID-C2-S6 represents the layout of two columns (C2:column 2), and the width of the sub bar is 4 columns (s4:sub width is 4 * 40-10). and. grid-c2-s6f, the last F represents the second case of a two-column layout, that is, sub and main interchange. Similarly,. GRID-C3-S5E6D represents the three-column layout, where the width of the sub bar is 5, the width of the extra column is 6, and the last D representation is the fourth in the S5e6 three-column layout.

For ease of use, the two-column layout that is most commonly used is grid-c2-s5. GRID-C2 directly. Again, Grid-c3 said. 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 the incremental enhanced workflow. 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 div class different. If you want to swap the left and right columns, as long as the very simple to modify the class can be.

When actually used, the two-column layout and three-column layout are sufficient. In fact, with two columns, other layouts can be combined. 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 picture, etc. will support chaos layout, in fact, you can use Overflow:hidden to solve, but consider the negative impact of overflow, finally by the layout of the internal module to autonomously 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.