Currently grid compatibility is still possible, the mainstream browser support for it very hard, ie9,10 coming soon announced that it would it have very good support, you need to use the current outdated syntax. I believe that in the near future grid will become a front-end staff every necessary arrangement skills.
Introduction property
1. Properties on the parent element
| Attributes | Explanation |
|---|---|
| display | Set grid layout |
| grid-template-rows | The number of rows of the grid |
| grid-template-columns | The number of columns of the grid |
| grid-template-areas | The mesh elements are arranged in the sub name |
| grid-column-gap | It is used to specify the size of the vertical grid track |
| grid-row-gap | It is used to specify the size of the row of the grid rail |
| grid-gap | Abbreviations grid-column-gap and the grid-row-gap of these two properties |
| justify-items | The contents of all the grid cells in the X-axis alignment |
| align-items | The contents of all cells in the grid alignment in the Y-axis |
| justify-content | To set the entire arrangement of the X-axis grid in the grid container |
| align-content | To set the entire arrangement of the Y-axis grid in the grid container |
| grid-auto-columns | Set an invisible grid of high |
| grid-auto-rows | Setting an invisible grid width |
| grid-auto-flow | When the layout, the method of filling the selected mesh |
2. Set the attribute child elements
| Attributes | Explanation |
|---|---|
| grid-area | A name to a single child element |
| grid-column-start | Position of the element which begin with a vertical bar |
| grid-column-end | Which ends with a vertical bar |
| grid-row-start | Which began with the horizontal line |
| grid-row-end | Which ended with the horizontal line |
| grid-row | grid-row-start and grid-row-end Abbreviation |
| grid-column | Abbreviations grid-column-start and grid-column-end of these two properties |
| grid-area | and grid-row grid-column Abbreviation |
| justify-self | Providing a single sub-element arrangement in its X-axis in a small grid |
| align-self | Providing a single sub-element arrangement in its Y-axis in a small grid |
| align-content | To set the entire arrangement of the Y-axis grid in the grid container |