Research on Web Grid system: 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: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>
</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:

1. The use of floating to achieve the layout, simple and clear
2. 9,502 side without margin, the last column of class needs to be added
3. 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:

1. The margin is evenly placed on the 9,502 side.
2. All grid except the width is different, the left and right margins are consistent margin:0 10px;
3. 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-Layout 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%; width:32%}
Div.first {margin-left:0}
#ft {Clear:both}
</style>