Front-end development: Grid layout

1. Preface

Previous article click on the volume is not bad, why comments do not? There are also objections. Hey! It seems that I have to reflect on the quality of the post.

Frankly speaking, elder brother is not very concerned about this not "harmonious" voice, perhaps the beginning of nonsense too much of the sake of it. I think other people's sharing, no utilitarian, are with the mood and write.

The slogan of the garden: Code changes the world! My principle: I can not change your opinion, but hope to get feedback from everyone-good or bad !

2. Description

Recently, we need to strengthen the front-end knowledge, so I intend to summarize these. Frankly speaking, my front-end knowledge is not familiar with, to understand a bit, but also to comfort themselves.

Personal feeling, learning what knowledge, with interest far from work (earn money) need to force to learn more powerful.

Maybe someone is serious, I will not, please others are, learn things not interested, learning is also tired, simply give up just.

In short, want to learn thousands of things, do not want to learn the things are thousand thousand. From a choice, perhaps helpless, perhaps just in line with the ideal.

In this chapter, I first talk about CSS grid layout (grid layouts), although the current major browsers only ie10+ support slightly better, but this technology is also clearly included in the network.

Is it later fully supported by the mainstream browser? From the technical characteristics of the benefits, there should be a promising.

3. Property API

Let's take a look at the grid properties that support ie10+:

tr>

 	Properties	Description
column	-ms-grid-column	Gets or sets a value that specifies the position of the column grid where the object is placed
-ms-grid-column-al IGN	Gets or sets a value that specifies the horizontal alignment of objects within a grid column
-ms-grid-columns	Gets or sets one or more The value of the width of each grid column in the specified object
-ms-grid-column-span	Gets or sets a value that specifies the number of columns in the grid that the object spans
line	-ms-grid-row	Gets or sets a value Specifies where in the grid row the object is to be placed
	-ms-grid-row-align	Gets or sets a value that specifies the vertical alignment of the object in the grid row
	-ms-grid-rows	Gets or sets one or more values for the height of each grid row in the specified object
	-ms-grid-row-span	Gets or sets a value that specifies the number of rows in the grid that the object spans

Don't forget, of course, there's a Display:-ms-grid . Defines the box as a grid property. There are many more advanced properties, but the current browser is not supported, it can not be demonstrated.

4. Three rows three columns

Tip: With the Web Essentials tool (described earlier in Boven), you can quickly write HTML code blocks such as:

DIV#GRID>DIV#GRID$*9 Press the TAB key to generate:

<div id="Grid"> <div id="Grid1"></div> <div id="Grid2"></div> <div id="GRID3"></div> <div id="Grid4"></div> <div id="GRID5"></div> <div id="Grid6"></div> <div id="Grid7"></div> <div id="Grid8"></div> <div id="grid9"></div> </div>

Three lines of three columns of code:

<! DOCTYPE html>"Utf-8"/> <title> Grid Layout </title> <style>#grid {display:-ms-grid;/*set to Grid*/-MS-GRID-COLUMNS:1FR 1FR 1fr;/*three-width column*/-MS-GRID-ROWS:1FR 1FR 1fr;/*third-level High Line*/width:600px;            height:300px;        Color:white; } #grid1 {-ms-grid-column:1;/*1th Column*/-ms-grid-row:1;/*Line 1th*/background-color:red; } #grid2 {-ms-grid-column:2;/*2nd Column*/-ms-grid-row:1;/*Line 1th*/background-Color:blue; } #grid3 {-ms-grid-column:3;/*3rd Column*/-ms-grid-row:1;/*Line 1th*/background-Color:orange; } #grid4 {-ms-grid-column:1;/*1th Column*/-ms-grid-row:2;/*Line 2nd*/background-Color:black; } #grid5 {-ms-grid-column:2;/*2nd Column*/-ms-grid-row:2;/*Line 2nd*/background-Color:brown; } #grid6 {-ms-grid-column:3;/*3rd Column*/-ms-grid-row:2;/*Line 2nd*/background-Color:darkblue; } #grid7 {-ms-grid-column:1;/*1th Column*/-ms-grid-row:3;/*Line 3rd*/background-Color:chartreuse; } #grid8 {-ms-grid-column:2;/*2nd Column*/-ms-grid-row:3;/*Line 3rd*/background-Color:burlywood; } #grid9 {-ms-grid-column:3;/*3rd Column*/-ms-grid-row:3;/*Line 3rd*/background-Color:blueviolet; }    </style>"Grid"> <div id="Grid1">grid1</div> <div id="Grid2">grid2</div> <div id="GRID3">grid3</div> <div id="Grid4">grid4</div> <div id="GRID5">grid5</div> <div id="Grid6">grid6</div> <div id="Grid7">grid7</div> <div id="Grid8">grid8</div> <div id="grid9">grid9</div> </div></body>
Effect:
Look at the effect, control the code, do you realize what? Hey! It might feel like it's not much easier to use a table tag to make the whole.
Or you can use the box model to float the float layout and even position the position layout to get the same effect.
This effect can also be achieved by adding multiple column layouts and flex scaling layouts to CSS3.
When we see people doing things improperly, we, as bystanders, always politely say, "You can do this, but you shouldn't."
Any technology is not omnipotent, you better choose the best kind of technology to adapt to the application scenario may be difficult, but the practice will always find some experience.
Put in the Code technology choice, we have to thank the "master", "predecessors" through practice and testing, to provide us with some good advice.
Of course, each person's habits, thinking, ways of doing things differently, can choose their own good or not.
I briefly summarize in this (because the front-end technology learning just on the road, the wrong place, but also hope that everyone taught me, pointing out the wrong):
table: Usually to show the data, if it is used to do the overall (large) layout of the Web page, the browser load parsing speed is not good ..., which is also the reason for div+css layout;
div+css: This is the css2.x era, the best way to layout. Float,position and box model application technology;
column: This is a large section of the content of the column layout, is the most comfortable layout way;
Flex: This is also hanging explosion technology, the current mainstream browser plus vendor prefix, the basic support almost, the final unified standard is just around the corner. Its characteristics can make the position of the block element, the size is easy to control the layout way.
5.grid Layout Features
Oh, pull out other layout options, we have to return to this chapter on the topic.
1th: The HTML element order doesn't matter, our layout is populated with cells. Such as:
        <div id="grid3">grid3</div>        <div id="grid4" >grid4</div>        <div id="grid1">grid1</div>        <div id="grid2"
Our CSS definition has not changed, the effect is the same, this is the table inconvenient. It brings the benefits, you should understand it.
2nd: Cell interior elements, position positioning, we experience:
        #grid1 {            1*/* 1th column */            1/* 1th Row */            /* Column Alignment Center */            /* Row Alignment Center */             Background-color:red;            padding:20px;        }
Its effect (column 1th, column 1th cell):
　　
3rd: Merge cells, for example, let's merge the third row (GRID8) and third row (GRID9) cells in the second column:
  #grid8 {-ms-grid-column: 2; /*   column 2nd  */-ms-grid-row: 3 ; /*   line 3rd  */-ms-grid-column-span: 2 ; /*   span 2 columns  */  Z -index: 1 ; /*   */         background -color:burlywood; }
The effect (GRID9 is on the lower level, so I can't see it, it doesn't exist):
　
6. Fixed width on both sides, middle adaptive width
Modify:
#grid{Display:-ms-grid;/*set to Grid*/-ms-grid-columns:200px Auto 100px;/*the three-column auto width is automatically based on the internal size*/-ms-grid-rows:1fr 1fr 1fr;/*third-level High Line*/width:600px;Height:300px;Color: White; }
The effect (in the middle column):
　
Oh, how to adapt to the biggest? In percent:
  /* three columns */
Well, eggs, more, this effect is slightly hungry.
7. Summary
This chapter introduces, is still relatively simple, the content is not many. This technology still waits for the browser vendor to support the development, after becoming the standard, you have learned again. I also have a little experience here, not a detailed overview.
This chapter code, please add QQ Group:290576772 to the group space download! (The code will be updated whenever you add it later) 
Front-end development: Grid layout