Introduction to Grids

Flexbox常用于一维排版（one-dimensional layout），而CSS grid更多用于二维排版（two-dimensional layou)，且其提供了很多工具在行与列之间对其或移动elements。

Creating a Grid

要搭建一个grid，你同时需要 a grid container（a parent element） and grid items（children）。

要想使HTML元素变为a grid container，you must set the element’s display property to grid (for a block-level grid) or inline-grid (for an inline grid). Then, you can assign other properties to lay out the grid.

Creating Columns

默认情况下，grids只有one column。可以使用grid-template-columns属性来定义columns。

上例中该属性产生了2个变化：其一，它定义了columns的个数，在上例中——是3个；其二，它定义了每个column的width，分别是20px、40px、60px（没错，你可以将这两种单位混合使用，即使相加后会产生overflow）。

Creating Rows

同样地，grid-template-rows属性几乎与grid-template-columns属性一模一样（identical），它定义了rows的个数和height。

Grid Template

grid-template 属性可以完全替代上述两个属性。

slash（斜杠）前面表示rows的个数和height，后面表示column的个数和width。

Fraction

在CSS grids 中，专门定制了一种单位——fr（分数）。通过它，你可以轻松防止items超出网格边界。

css .grid { display: grid; width: 1000px; height: 400px; grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; }

上例表示网格有3个rows（200px，100px，100px），3个columns（200px，600px，200px）。

fr也可以和其他units（单位）混用：

css .grid { display: grid; width: 100px; grid-template-columns: 1fr 60px 1fr; }

上例中，已有60px被第二个column占据，因此剩余两栏共用40px，故分别为：20px，60px，20px。

Repeat

上述三个定义rows和columns的属性的值也可以用repeat表示。

Repeat尤其常用于fr。如repeat(5,1fr),会将等分为5栏或5列。

minmax

目前为止，网格都是固定尺寸的（有明确的height and width）。但是有时你可能需要网格根据浏览器尺寸重新调整大小（ to resize based on the size of your web browser）.

在这种情况下，你可能需要防止a row or column from getting too big or too small. 举例来说，如果你有一张100px宽的图片，你可能不想让column get thinner than 100 pixels! 此时minmax()功能可以解决这个问题。（使用它时，需要删掉grid的width属性）。

Grid Gap

目前我们的网格，items之间没有任何空隙。两个CSS属性grid-row-gap and grid-column-gap 可以在栏或列间插入空白。

css .grid { display: grid; width: 320px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; }

需要知道的是，grid-gap并未在the beginning or end of the grid 处添加空白。上例中，我们的grid会有3 columns，其中间会有10px的gap。

让我们来计算一下每个column的宽度。记住，fr 只以所有available space为基准。网格320px宽，且其中20px被2个 grid gap占据。因此available space是300px，故每个column为100px宽。

最后，grid-gap也可以同时设定 row and column gap 。

grid-gap: 20px 10px;

The distance between rows to 20 pixels and the distance between columns to 10 pixels. ( 中间无/隔开）。如果只有一个值需要设定，那么还得用grid-row-gap or grid-column-gap 。

Grid Items

当我们定义一个网格时，我们必须规定 the quantity of rows and columns and their respective sizes.

上面所有的例子中，被放置网格中的items总是占据exactly one square。但情况并非总是如此，通过making grid items take up more than one row and one column. ，我们可以极大程度上改变gird的l外观。如图， Items A, B, C, and E span（涵盖） more than one row!

Multiple Row Items

使用CSS属性——grid-row-start and grid-row-end，我们可以使 single grid items take up multiple rows. 记住，此时我们不是给父级元素（the outer grid container）应用CSS样式，而是给grid

里面的elements 应用CSS。

上例中，the HTML element of class item will take up two rows in the grid, rows 1 and 2. The values that grid-row-start and grid-row-end accept are grid lines.

Row grid lines and column grid lines start at 1 and end at a value that is 1 greater than the number of rows or columns the grid has. For example, if a grid has 5 rows, the grid row lines range from 1 to 6. If a grid has 8 columns, the grid row lines range from 1 to 9.

The value for grid-row-start should be the row at which you want the grid item to begin. The value for grid-row-end should be one greater than the row at which you want the grid item to end. An element that covers rows 2, 3, and 4 should have these declarations: grid-row-start: 2 and grid-row-end: 5.

Grid Row

也可以使用grid-row属性来代替grid-row-start and grid-row-end。下图二者等效：

当使用这些属性使一个item占据 multiple rows or columns 时，它也会包括 grid-gap的空间（如果存在的话）。例如， if an item spans two rows of height 100 pixels and there is a ten-pixel grid-gap, then the item will have a total height of 210 pixels.

Span

The previous three properties also exist for columns. grid-column-start, grid-column-end and grid-column work identically to the row properties. These properties allow a grid item to span multiple columns.

当使用上述6个属性时，可以使用关键词——span，来start or end a column or row relative to its other end（相对于其另一端）。

上面的代码说明了，该item element 始于 column 4 且占据了2 columns 的空间，故其会占据column4和5。它与下图的代码等效。

span是个有用的关键词，因其避免了 the ending grid line 的计算错误。如果你知道你想从哪开始，以及他应该span多少的时，就用span吧！

Grid Area

我们已经能够用 grid-row and grid-column as shorthand（简化） for properties like grid-row-start and grid-row-end.

我们可以进一步用 grid-area 属性来简化代码。该属性同时可以设置rows和columns是起止位置。

grid-area 有四个被斜杠分开的值，分别代表：

1.grid-row-start

2.grid-column-start

3.grid-row-end

4.grid-column-end

上例中，the item 将会占据rows2到3，columns3到8。如果你已知晓items要在网格中的位置，grid-area是个好方法来摆放它们。

Review

grid-template-columns defines the number and sizes of the columns of the grid

grid-template-rows defines the number and sizes of the rows of the grid

grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line

grid-gap puts blank space between rows and/or columns of the grid

grid-row-start and grid-row-end makes elements span certain rows of the grid

grid-column-start and grid-column-end makes elements span certain columns of the grid

grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line