960 basic principles and usage of Grid System

Document directory

• 960 basic principles of Grid System
• Containers (container)
• Grids (GRID)/columns (column)
• Margins
• Styling (add style)
• We did

Some readers are interested in the principles and usage of the 960 grid system css framework, storm Binbin will share with you the basic principles and simple usage of the 960 grid css framework.

CSS frameworks have always been a hot and controversial topic. Indeed, some front-end er in China are paying more and more attention to CSS frameworks and are trying to use them, I think the css framework can save more development time and significantly improve work efficiency. Of course, there are still many people who hold the opposite opinion and think that CSS is not so advanced as to involve the framework! I remember a programmer in cnbeta saying, "this year, even CSS has a framework ?!". Today, storm Binbin does not want to introduce CSS frameworks or their advantages and disadvantages. I just want to explain a very popular framework in foreign countries. Specifically, it is a grid system, that is, a 960 grid system. Through this tutorial, you will know that after using the 960 framework, your development work will be carried out faster.

If you are interested in other CSS frameworks or want to learn more about CSS frameworks, refer 《Featured 15 Foreign CSS frameworks.

960 basic principles of Grid System

First, you need to learn about "How to make the framework work ". You can learn through your own attempts, but I will continue to explain it here, so let's get started.

Do not edit 960.css

Note: Do not edit the 960.css file. If you modify it, you will not be able to update the Framework in the future.

Read Grid

Before using CSS code in an external file, you must call them in our HTML file. Call as follows:

<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "path/to/960/reset.css"/>
<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "path/to/960/960 .css"/>
<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "path/to/960/text.css"/>

After we call them, we need to call our own CSS files.

Containers (container)

In the 960 framework, you can select two types of containers named. container_12 and. container_16. Both containers are 960px in width (that is why 960 grid is called), but the difference is that they contain different numbers of columns. As the name suggests, the. container_12 container is divided into 12 columns, and. container_16 is divided into 16 columns. The containers with 960px width are horizontally centered.

Grids (GRID)/columns (column)

You can choose many different combinations of column widths, but they are different in the two containers. You can open 960.css to understand these widths, but this is not necessary for designing a website. Here, storm Binbin provides a useful technique to make it easier for you to use the framework.

For example, if you want to use only two columns (primary content area/sidebar) in your container, you can do this:

<Div class = "container_12">
<Div class = "grid_4"> sidebar </div>
<Div class = "grid_8"> main content </div>
</Div>

You may have understood the above code, but I still want to talk about it. That is to say, in container _12This container uses grid _4And grid _8Two columns, 4 + 8 equals 12! Do you understand? One of the advantages of using a grid system is that you do not need to calculate the width of a column, saving a lot of computing.

Let's take a look at how to write a four-column layout:

<Div class = "container_12">
<Div class = "grid_2"> sidebar </div>
<Div class = "grid_6"> main content </div>
<Div class = "grid_2"> photo's </div>
<Div class = "grid_2"> advertisement </div>
</Div>

As you can see, this system works well. If you try to read from your browser, you will find something wrong. But it doesn't matter. That's what we will discuss next.

Margins

By default, there will be some margin between each column. Each grid _ (insert value here) class has a left margin and right margin of 10px. That is to say, the margin value between the two columns is 20px.

The 20px margin can keep the layout white and look smoother, which is one of the reasons I like 960 grid system.

In the above example, we encountered some problems when reading it using a browser. Now let's fix it.

The problem is that each column contains the left and right margin, but the leftmost column should not have the left margin, and the rightmost column should not have the right margin. (Loose !) The solution is as follows:

<Div class = "container_12">
<Div class = "grid_2 Alpha"> sidebar </div>
<Div class = "grid_6"> main content </div>
<Div class = "grid_2"> photo's </div>
<Div class = "grid_2 Omega"> advertisement </div>
</Div>

You only need to addAlphaClass to remove the left margin, addOmegaClass to remove the right margin. Now our layout can be perfectly aligned in the browser. (Yes, including IE6)

Styling (add style)

In fact, you have mastered how to create a basic grid layout using the 960 framework. However, you may want to add some styles for your layout.

<Div class = "container_12">
<Div id = "sidebar" class = "grid_2 Alpha"> sidebar </div>
<Div id = "content" class = "grid_6"> main content </div>
<Div id = "Photos" class = "grid_2"> photo's </div>
<Div id = "advertisements" class = "grid_2 Omega"> advertisement </div>
</Div>

Because CSS uses the priority form to think about how to interpret the style, the ID is higher than the class priority. In this way, we can create a personalized style with the ID selector in our independent CSS file. If some style attributes are the same as those of 960 but their values are different, the browser will give priority to the style in your CSS file. Of course, if you are interested, you can also see the actual effect of adding a style to the instance above.

We did

This is the case! You have mastered how to use the 960 grid system to create a layout compatible with all browsers. After you fully master the 960 system, you will find that it saves you a lot of time to write CSS.