I. Overview
CSS Grid Layout (Grid) is a set of two-dimensional page layout system, it appears to completely subvert the traditional way of page layout.
First, let's introduce a few concepts:
Imagine a layout of three rows and three columns, all grid lines that constitute the grid lines, three lines of three rows each layout will have four grid lines.
Track grid portion is between two adjacent parallel grid lines.
And flex layout, he will be the parent container and subprojects, here we called mesh container and grid item.
Next, from the container to the respective basic properties of the mesh grid item to introduce grid layout.
Second, the grid containers
The property value is set to display inline-grid or grid creates a grid containers, all containers direct child node automatically becomes the grid project.
Example 1:
Grid items arranged in rows, the width of the grid project occupies the entire container.
Example 2:
Grid items arranged in rows, the width of the grid project is determined by their width.
Third, the Show Grid
Properties grid-template-rows and grid-template-columns
After the container specified grid layout, then we must divide rows and columns. Column width grid-template-columns for each attribute definition column, grid-template-rows attribute defines the row height of each line.
Example 3:
Grid project high row 1 is 50px, high grid row item 2 is 100px.
Because only defines two rows high, the grid lines 3 and 4 project is itself highly dependent on the height.
Example 4:
Is analogous to the definition of the attribute grid-template-columns define the dimensions for the column.
Because only three definition, the items in the new row 4,5,6 line; because they are located on the track and 1,2,3 column, it defines a width equal to the track 1, 2 column width.
A first grid project, column 2, the width of the third column are 90px, 50px and 120px.
Fourth, grid projects across the ranks
The default grid project occupies one row and one column, but you can use a property before locating the project to specify project span multiple rows or columns.
Example 5:
By providing grid-column-start property value and grid-column-end, so that the grid spans multiple columns project.
Five, justify-content attribute, align-content property
justify-content attribute area is the entire contents of the container inside the horizontal position (left, right), align-content property vertical position of the entire content area (the lower).
Identical wording of these two properties, can take the following values. (FIG below are to justify-content property as an example, align-content attribute exactly the same FIG., Only the vertical direction into a horizontal direction.)
start - the starting frame alignment of the container.
end - the end of frame alignment of the container.
center - the inner container is centered.
stretch - when the size of the item is not specified, a tensile occupy the entire grid containers.
Equally spaced on both sides of each item - space-around. Therefore, the gap between the project twice the size of the project and the interval border of the container.
Equally spaced from project to project, and there is no gap between the item and the container frame - space-between.
Equally spaced from project to project, and is the same length of the interval between the item and the container frame - space-evenly.
Six, grid-auto-columns attribute, grid-auto-rows attribute
Sometimes, specify the location of some items, outside the existing grid. For example, the grid is only 3, but a certain item specified in the fifth line. In this case, the browser will automatically generate excess grid, in order to place the project.
grid-auto-columns properties and grid-auto-rows is used to set the property, the excess width of the column grid browser automatically created and the line height. They wording identical grid-template-columns and a grid-template-rows. If you do not specify these attributes, browser completely cell contents according to the size of the new grid determines the column width and line height.
I hope my article will be helpful to you.