Simple Grid Layout

The layout of the page is the main skeleton of the page composition, its importance is self-evident;
Get a PSD, generally you will:
Looking at the overall layout, is it a column layout or a banner layout? is the column Layout 2 columns or 3 columns? How many banners are there in a banner layout? How many columns are there in each banner?

That of course first to write the main layout of the code, and building a building before the foundation of the truth is the same drop. After the layout code is determined, start the "fill the blanks" game on the layout.

Layout is also important for designers, and when developers and designers follow a unified layout specification, they can greatly reduce the cost of communication. At the same time ensure the unity of the page style.

The sample code for the layout scenario described below is automatically generated using the Gridsystemgenerator reference 960GS framework. Css_grids Example Page width 1000px

• Example 1-1000_20_5_5.html

Combination of 20 columns (40px per column), 10 pixel interval, actual width 990px

• Example 2-1000_20_10_10.html

Combination of 20 columns (30px per column), 20 pixel interval, actual width 980px

• Example 3-1000_25_5_5.html

Combination of 25 columns (30px per column), 10 pixel interval, actual width 990px

• Example 4-1000_25_10_10.html

25 Columns of combination (20px per column), 20 pixel interval, actual width 980px page width 990px

• Example 1-990_11_5_5.html

Combination of 11 columns (80px per column), 10 pixel interval, actual width 980px

• Example 2-990_18_10_10.html

Combination of 18 columns (35px per column), 20 pixel interval, actual width 970px

• Example 3-990_18_5_5.html

Combination of 25 columns (45px per column), 10 pixel interval, actual width 980px

• Example 4-990_33_5_5.html

33 Columns of combination (20px per column), 10 pixel interval, actual width 980px page width 980px

• Example 1-980_14_5_5.html

Combination of 14 columns (60px per column), 10 pixel interval, actual width 970px

• Example 2-980_14_10_10.html

Combination of 14 columns (50px per column), 20 pixel interval, actual width 960px

• Example 3-980_28_5_5.html

28 Columns of combination (25px per column), 10 pixel interval, actual width 970px page width 960px

• Example 1-960_12_5_5.html

Combination of 12 columns (70px per column), 10 pixel interval, actual width 950px

• Example 2-960_12and16_10_10.html

12-Column or 16-column combination (60px or 40px per column), 20-pixel interval, actual width 940px

Simple Grid Layout