The grid layout css learning

Grid Layout

1 Introduction

Grid Layout (Grid) is the most powerful CSS layout scheme:
it is divided into a web page grids can be any combination of different grid, make a variety of layouts. Previously, only through complex CSS framework to achieve the effect, now built into the browser.

Flex layout grid layout and have some similarities, can specify the location of a plurality of items inside the container. However, they also present significant difference.

Flex layout is the axis of the layout, you can only specify "project" for the position of the axis, it can be seen as unidimensional. Grid layout container sucked into "row" and "column" generation cell, then specify "Project" cells, it can be seen as a two-dimensional layout. Grid layout powerful than the Flex layout.

2. Basic Concepts

2.1 Grid container (Grid Container)

Application display: grid elements. This is all the grid items (grid item) immediate parent element.

Grid item 2.2 (Grid Item)

Grid containers (Grid Container) child elements (e.g. direct child elements)
Note: The items only child element is the top container does not include child elements project

2.3 of rows and columns

Horizontal area inside the container is referred to as "line" (row), perpendicular to the area as a "column" (column)

2.4 Grid (Grid Line)

Meshing line, known as the "grid line" (grid line). Horizontal grid lines divide travel, vertical grid line dividing the column
under normal circumstances, there are n + 1 n-row plurality of horizontal grid lines, m columns have m + 1 for vertical grid lines, such as three rows have four levels Gridlines

2.5 Track grid (Grid Track)

The space between two adjacent grid lines. You can think of them as a column or row of the grid

2.6 grid cell (Grid Cell)

Row and column intersection region, referred to as "cells" (Cell)
under normal circumstances, n-rows and m columns will produce a nxm cells. For example, 3 rows and 3 columns will produce nine cells

2.7 Regional Grid (Grid Area)

4 total space surrounded by grid lines. A grid region (Grid Area) may be any number of grid cells (Grid Cell) Composition

3. Grid (Grid) property directory

3.1 Grid container (Grid Container) properties

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Grid item 3.2 (Grid Items) properties

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self
• place-self

4. parent element grid containers (Grid Container) properties

4.1 display

The element definitions, and create a new context for the mesh grid format container whose content
value:

• grid: generating a block-level mesh
• inline-grid: generating a trellis inner

4.2 grid-template-columns / grid-template-rows

After the container specified grid layout, then we must divide rows and columns. grid-template-columns attribute definition column width for each column, row grid-template-rows each row defines attribute high

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

value:

• <Track-size>: length value may be a percentage or free space grid containers aliquots (use fr units)
• <Line-name>: You can choose any name

Example px as a unit with:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

The above code specifies a grid of three rows and three columns, column width and line is high 100px

Example Unit as a percentage:

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

4.2.1 repeat () repeating

Sometimes, repeated write the same value is very troublesome, especially when a lot of the grid. In this case, using the repeat () function, a simplified duplicate values. The above code with the repeat () is rewritten as follows.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat () accepts two parameters, the first parameter is the number of repetitions (the Example 3), the second parameter is the value to be repeated
repeat () repeating a pattern are also possible

grid-template-columns: repeat(2, 100px 20px 80px);

6 above code defines the width of the first and fourth columns of 100px, the second column as 20px and fifth, third and sixth columns as 80px

4.2.2 auto-fill keyword

Sometimes, the size of the cell is fixed, but the size of the container uncertain. If desired each row (or each column) to accommodate as many cells, then you can use the auto-fill keyword indicates autofill.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

The above code represents the width of each column 100px, then automatically filled, until the container can not be placed more columns

4.2.3 fr Keyword

In order to facilitate proportional representation, the grid layout provides fr Keyword (fraction acronym, meaning "fragment"). If the width of two columns were 1fr and 2fr, it represents twice as much as the latter

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

The above two code represents the same width columns

fr can be used with absolute length units, this time will be very convenient:

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

The above code represents the width of the first column is 150 pixels, half the width of the second column is the third column

4.2.4 minmax()

MINMAX () function generates a length, length is expressed in this range. It accepts two parameters, respectively, the minimum and maximum

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

The above code, minmax (100px, 1fr) represents the column width is not less than 100px, not more than 1FR

4.2.5 auto keyword

auto keyword indicates that the length of the decision by the browser yourself

grid-template-columns: 100px auto 100px;

The above code, the width of the second column, is substantially equal to the maximum width of the column of cells in the parent vessel, unless the cell contents is provided min-width, and that the value is greater than the maximum width

4.2.6 Name grid lines

grid-template-columns attribute and attribute grid-template-rows inside square brackets may also be used to specify the name of each of the grid lines, to facilitate future reference.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

The above code specifies a grid layout for the 3 rows x 3 columns therefore four vertical grid lines and horizontal grid lines 4. Square brackets followed by the name of these eight lines.
Grid layout allows the same line a plurality of names, such as [fifth-line row-5] .

4.3 grid-template-areas 属性

Grid layout allows to specify "zone" (area), a single region or a plurality of cells form. grid-template-areas properties for defining regions.

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

value:

• : Mesh area name specified by the grid-area grid item
• . (Dot): represents a blank grid cell
• none: mesh area is not defined

Example:

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

The above code will create a four rows wide and 3 high mesh. The entire top header row by regions. The middle row by the two main areas, one empty cell, composed of a sidebar region. The last line is all footer regions.

Note that, the named range will affect the grid lines. Starting grid lines for each region, the domain name is automatically -start region, grid lines is automatically terminated domain name -end region.

For example, an area called header, the start position of the horizontal grid lines and the vertical grid lines is called header-start, the end position of the horizontal grid lines and the vertical grid lines is called header-end.

This means that some grid lines may have multiple names, for example, the left-most grid lines above, it will have three names: header-start, main-start and footer-start.

4.4 grid-template

Used to define the grid-template-rows, grid-template-columns, grid-template-areas shorthand property

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

value:

• none: All three attributes are set to their initial values
• <Grid-template-rows> / <grid-template-columns>: the grid-template-columns and a grid-template-rows corresponding to a specific value, and sets grid-template-areas is none

Example:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
等价于
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

4.5 grid-row-gap attribute, grid-column-gap attribute, grid-gap properties

Grid-row-gap interval property between rows (row pitch), grid-column-gap property of the column to column spacing (column pitch).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

The above code, grid-row-gap is provided for line spacing, grid-column-gap for setting column spacing.

The combined grid-gap attribute is shorthand for grid-column-gap, and the grid-row-gap, the following syntax.

grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
  grid-gap: 20px 20px;
}

If the grid-gap omit the second value, the browser thinks the second value is equal to the first value
according to the latest standards, grid- above three prefix attribute name has been removed, grid-column-gap and grid-row-gap written column-gap and row-gap, grid-gap write gap.

4.6 justify-items attributes, align-items attributes, place-items property

justify-items property cell contents horizontal position (left, right), align-items property cell contents vertical position (on the lower).
The syntax is as follows:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

Identical wording of these two properties, can take the following values:

• Aligned with the leading edge of the cell: start
• End edge alignment of the cell: end
• center: the internal grid cells centered
• stretch: stretching the entire width of the (default) filled cell
  place-items are provided, and the short form align-items of justify-items.

place-items: <align-items> <justify-items>;
下面是一个例子
place-items: start end;

If the second value is omitted, the browser that is equal to a first value

4.7 justify-content attribute, align-content attribute, place-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)

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

Identical wording of these two properties, can take the following values:

• Starting container frame alignment - start
• End of container frame alignment - end
• center - center inner container
• 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 and the project is larger than the interval container frame double
• 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.
  place-content property is combined shorthand align-content property and justify-content property

place-content: <align-content> <justify-content>

place-content: space-around space-evenly;

If the second value is omitted, the browser will assume that the second value equals the first value

4.8 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.
grammar:

值：
<track-size>：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

The above code specifies the new line of high-unified 50px (original line height is 100px).

4.9 grid-auto-flow properties

If you have some not explicitly placed on the mesh grid item (grid items), automatic placement algorithm will automatically place these grid item. The property controls how automatic layout algorithm works.

值：
row：告诉自动布局算法依次填充每行，根据需要添加新行 （默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺
.container {
  grid-auto-flow: row | column | row dense | column dense
}

4.10 grid properties

Set all of the following attributes in a short statement: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. (Note: You can specify an explicit or implicit grid mesh properties in a single statement).

值：
none：将所有子属性设置为其初始值。
<grid-template>：与grid-template 简写的工作方式相同。
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? ：将grid-template-rows 设置为指定的值。 如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为 column。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns ，则将其设置为 auto。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>：将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧，则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ，则将其设置为 auto。
以下代码是等效的：
.container {
  grid: 100px 300px / 3fr 1fr;
}
.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

.container {
  grid: auto-flow / 200px 1fr;
}
.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

The grid item sub-element (Grid Items) properties

Note: float, display: inline-block, display: table-cell, vertical-align property of the grid and column- * invalid entries.

5.1 grid-column-start / grid-column-end / grid-row-start / grid-row-end

Location of the item is specified, the specific method is specified item four borders, which are positioned at the root of gridlines

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
值：
<line> ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
span <number> ：该网格项将跨越所提供的网格轨道数量
span <name> ：该网格项将跨越到它与提供的名称位置
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

5.2 grid-column properties, grid-row properties

The combined grid-column attribute is shorthand for grid-column-start and the grid-column-end, grid-row property is combined shorthand grid-row-start property, and the grid-row-end

值：
<start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
.item-c {
  grid-column: 3 / span 2;
  grid-row: 3 / 4;
}
上面代码表示从第三条列网格线开始跨两列，从第三条网格线开始到第四条

5.3 grid-area

grid-area in which a specified item attribute area, grid-area property is also used as grid-row-start, grid-column-start, grid-row-end, grid-column-end combined shorthand specified directly location of the project.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

5.4 justify-self attribute, align-self attributes, place-self property

justify-self cell contents property horizontal position (left, right), with usage justify-items property is exactly the same, but act only on a single project.
align-self cell contents attribute vertical position (the lower), align-items with identical attribute usage, but also to act only on a single project.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
这两个属性都可以取下面四个值:
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

The combined properties are place-self align-self shorthand properties and properties justify-self

值：
auto – 布局模式的 “默认” 对齐方式。
<align-self> <justify-self>：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
.item-a {
  place-self: center;
}
.item-a {
  place-self: center stretch;
}