CSS grid layout grid entry
CSS grid layout is a two-dimensional grid layout, use it for a two-dimensional page layout, convenient and easy to introduce the following its specific use:
1. Definitions grid layout
First, you must use the display: grid container element is defined as a grid layout.
2. Set the number of rows and columns
Grid-template-columns used to set the number of columns and grid-template-rows set to the number of rows. Value of each line are behind the high ranks, and each width.
Such operation may be provided, for example a grid layout three rows and four columns:
i.e. 3 are high trekking 200px, 300px, 100px, 4 column width of the column 200px, 200px auto 25%, respectively; wherein 25 represents 25% of the width of the parent container % i.e. 250px, auto subtracting the width of the parent container showing the other three broad i.e. 450px.
Effect is obtained as follows:
Further the ratio may be used to set the grid size fr:
For example:
to give 3 row box ratio is 1: 2: 1, respectively, i.e., 3 trekking high 150px 300px 150px. 4 ratio of 1: 1: 1: 1, i.e., column width 4 are 250px. Each high trekking parent container height and of each column and the column width of the parent container width.
Box effect is as follows:
When the row height of each row of each column is the same, column widths are the same, can operate with REPEAT (),
for example:
can be obtained the following effects:
3. meshing region
使用grid-template-areas对网格划分区域，对上面的网格进行区域划分，可以做以下操作：
第一步，先给每个区域起个名字，每个区域用一个名字占用位置。
说明：给每个区域起一个名字，如上12个网格一共分为a b c 3个区域，a占两个网格，b占五个网格，c占四个网格。
注：每个区域必须为矩形。
第二步：指定div对应区域的名字
效果如下：
4. 设置行间距和列间距
可以用grid-column-gap设置列的间距，用grid-row-gap设置行的间距。
例如：对上面划分好的区域设置行的间距为5px；列的间距为10px，可以做以下操作：
得到如下效果：
间距和列间距可以用复合写法，例如grid-gap:5px 10px;第一个值是行间距，第二个值是列间距。
5. 子项水平居中方式
可以用justify-items设置子项的水平居中方式
默认值：stretch，表现为水平或垂直填充。
效果：
值为start时
效果：
值为center时效果：
值为end时效果：
6. 子项垂直居中方式
Provided with child attribute align-items vertically centered manner
Default: stretch default values, expressed as a horizontal or vertical filling.
Effect:
when the value of start:
effect:
when the center value of effect:
when the value of end effects:
Note: the composite can be written to represent the horizontal and vertical alignment of the
place-items: start center;
the first value represents a vertical alignment, The second value represents the horizontal alignment.
Further can justify-content property overall horizontal alignment of the grid, the grid is provided integrally with the vertical alignment align-content, using the same elastic layout method, not described in detail herein.
