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

Source: Internet
Author: User

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.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.