A simple Responsive horizontal Grid layout framework Responsive Grid System, responsivegrid

A simple Responsive horizontal Grid layout framework Responsive Grid System, responsivegrid

There is a problem in web design that cannot be circumvented, that is, the layout problem. In general, a div may be divided into many parts, which are also divided horizontally into two parts. However, in different projects, we may use different css codes, A grid system provides a unified solution for such similar problems.

There are many grid la S, but there are many very complicated ones, and they often cannot be developed twice. Responsive Grid System is a foreign website that provides a very simple implementation. In fact, every front-end developer can write such a framework, but starting from scratch may make many people have insufficient motivation. This framework code is very simple. For me, the only reason for using it is that I can modify it and follow its structure and naming rules. Many times, it is precisely because we do not know how to name the css code of a system.

Well-developed 5-year UI front-end framework!

My attitude towards this framework is: It gives us a good start, and I can continue to follow my ideas. There is also compatibility. Foreign maverick designers seldom consider browsers that do not support html5. They may make a lot of cool results, but don't be happy, it is useless on ie. This css framework is compatible with ie6.

Let's take a look at the example program of this framework, with three columns and four columns as examples:

Html code:

<div class="section group">    <div class="col span_1_of_3">    This is column 1    </div>    <div class="col span_1_of_3">    This is column 2    </div>    <div class="col span_1_of_3">    This is column 3    </div></div><div class="section group">    <div class="col span_1_of_4">    This is column 1    </div>    <div class="col span_1_of_4">    This is column 2    </div>    <div class="col span_1_of_4">    This is column 3    </div>    <div class="col span_1_of_4">    This is column 4    </div></div>

 

Css code: a 5-year UI front-end framework!

/*  SECTIONS  */.section {    clear: both;    padding: 0px;    margin: 0px;}         /*  COLUMN SETUP  */.col {    display: block;    float:left;    margin: 1% 0 1% 1.6%;}.col:first-child { margin-left: 0; }         /*  GRID OF THREE  */.span_3_of_3 {    width: 100%;}.span_2_of_3 {    width: 66.1%;}.span_1_of_3 {    width: 32.2%;}         /*  GRID OF FOUR  */.span_4_of_4 {    width: 100%;}.span_3_of_4 {    width: 74.6%;}.span_2_of_4 {    width: 49.2%;}.span_1_of_4 {    width: 23.8%;}         /*  GROUPING  */.group:before,.group:after {    content:"";    display:table;}.group:after {    clear:both;}

 

Although everyone can understand the code, for those who are good at learning, the focus is not the implementation itself, but the reason for implementation. If it is me, how can it be implemented. So I will briefly talk about the "Principle" of this grid system ":

How It Works

. Section

The section element splits the page horizontally into several parts. Well-developed 5-year UI front-end framework!

. Group

The group element solves the floating problem, which is similar to the clearfix on the Internet. Compatible with ie6 and later versions.

. Col

Col splits the section into small columns. Each column has a certain margin value. The width of each column is the percentage. The percentage value should be obtained by the author based on experience.

Responsive Development meets three window sizes

We recommend that you refer to the layout of the front-end frame of the puzzle and use the move first.
/X 400 */
# News {...}
...
@ Media (min-width: 400px ){...}
/* Use this parameter if it is greater than 400 */
# News {...}
...
}
@ Media (min-width: pixel px ){...}
/* Use this parameter if it is greater than 1200 */
# News {...}
...
}
You can refer to www.pintuer.com/..onsiveto apply the grid system, which is the key to the design.