css网格_深入研究CSS网格
css网格
介绍 ( Introduction )
This is the advanced version of the introductory tutorial on Grid I previously published, here, on Scotch. If you are new to Grid, be sure to check it out first.
这是入门教程的网格我的高级版本之前发表的， 在这里 ，在苏格兰。 如果您不熟悉Grid，请务必先将其签出。
This tutorial will dive deep into the CSS Grid Layout exploring almost all properties and features. In the end, you will be fully equipped to tackle any layout with this great CSS addition.
本教程将深入探讨CSS网格布局，探索几乎所有属性和功能。 最后，您将通过此强大CSS附加功能完全具备处理任何布局的能力。
术语：网格 ( Terminology: Grid )
A grid is a two-dimensional grid system. It can be used to build complex layouts as well as small user interfaces.
网格是二维网格系统。 它可以用来构建复杂的布局以及小的用户界面。
属性：显示 ( Property: display )
To make an element a grid, set its display property to grid.
要使元素成为网格，请将其显示属性设置为grid 。
.grid-to-be {
display: grid;
}Doing this makes .grid-to-be a grid container and its children grid items.
这样做使得.grid - 到 - 在 网格容器及其子网格项目 。
术语：网格线 ( Terminology: Grid Lines )
Grid Lines are created when you define explicit grid tracks. You can use them to individually place grid items.
定义明确的网格轨迹时会创建网格线。 您可以使用它们单独放置网格项目 。
术语：网格轨迹 ( Terminology: Grid Tracks )
Grid Tracks are the spaces between two Grid Lines. The rows and columns in a Grid are Grid Tracks.
网格线是两条网格线之间的空间。 网格中的行和列是网格轨道。
属性：网格模板列 ( Property: grid-template-columns )
We can create columns by using the grid-template-columns property. To define columns set this grid-template-columns property to column sizes in the order that you want them in the grid to appear. Let's have a look:
我们可以使用grid - template - columns属性创建列。 要定义列，请按照您希望它们在网格中出现的顺序，将此“ 网格 - 模板 - 列”属性设置为列大小。 我们来看一下：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
}This defines three 100px width columns. All grid items will be arranged, in order, in these columns. The row height will be equal to the height of the tallest element in that row, but this can be changed with grid-template-rows.
这定义了三个100px宽度的列。 所有网格项目将按顺序排列在这些列中。 行高将等于该行中最高元素的高度，但是可以使用grid - template - rows更改。
Note that, with only columns and no rows defined, elements fill columns and then flow back in rows. This is because of the implicit grid that Grid has created with grid lines and grid tracks.
请注意，在仅定义列且未定义行的情况下，元素将填充列，然后在行中倒流。 这是由于Grid使用网格线和网格轨迹创建的隐式网格。
属性：grid-template-rows ( Property: grid-template-rows )
grid-template-rows is used to define the number and size of rows in a grid. It is similar in syntax to grid-template-rows.
网格 - 模板 - 行用于定义网格 中行的数量和大小。 它的语法类似于网格 模板 行 。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}Only having the grid-template-rows property on without grid-template-columns will result in the column width being equal to the width of the widest element in that row.
仅具有grid - template - rows属性而没有grid - template - columns会导致列宽等于该行中最宽元素的宽度。
属性：网格模板 ( Property: grid-template )
grid is shorthand for three properties: grid-template-rows, grid-template-columns, and grid-template-areas.
grid是三个属性的简写： grid - templates - rows ， grid - templates - columns和grid - templates - area 。
The way you use it is like this:
您的使用方式如下所示：
.grid {
grid-template:
"header header header" 80px
"nav article article" 600px
/ 100px 1fr;
}You define the template areas like you normally would, place the width of each row on its side and then finally place all the column widths after a forward slash. Like before, you can place all of it on a single line.
您可以像通常那样定义模板区域，将每行的宽度放在其侧面，然后最后将所有列的宽度放在正斜杠之后。 像以前一样，您可以将其全部放在一行上。
数据类型： ( Data Type: )
The fr unit is a new unit created for CSS Grid Layout. The fr unit helps to create flexible grids without needing to calculate percentages. 1fr represents one fraction of the available space. The available space is divided into the total number of fractions defined. So, 3fr 4fr 3fr divides the space into 3+4+3=10 parts and allocates 3, 4, and 3 parts of the available space for the three rows/columns respectively. For example:
fr单位是为CSS网格布局创建的新单位。 fr单位有助于创建灵活的网格，而无需计算百分比。 1fr表示可用空间的一小部分。 可用空间分为定义的分数总数。 因此， 3fr 4fr 3fr将空间分成3 + 4 + 3 = 10部分，并分别为三个行/列分配3、4和3的可用空间。 例如：
.grid {
display: grid;
grid-template-columns: 3fr 4fr 3fr;
}If you mix fixed units with flexible units, the available space for the fractions is calculated after subtracting the fixed space. Let's look at another example:
如果将固定单位与弹性单位混合，则分数的可用空间是在减去固定空间后计算的。 让我们看另一个例子：
.grid {
display: grid;
grid-template-columns: 3fr 200px 3fr;
}The width of a single fraction is calculated like this: (width of .grid - 200px) / (3 + 3). The space of the gutters, if any present, would have also been subtracted initially from the width of .grid. This is the difference between frs and %s that percentages don't include the gutter that you define with grid-gap.
单个分数的宽度计算如下：（. .grid宽度.grid ）/（3 + 3）。 排水沟的空间（如果有的话）最初也会从.grid的宽度中.grid 。 这是fr s和% s之间的区别，百分比不包括您用网格 间隙定义的排水沟。
Here 3fr 200px 3fr is essentially equal to 1fr 200px 1fr.
在这里3fr 200px 3fr实际上等于1fr 200px 1fr。
显式网格和隐式网格 ( Explicit grid and Implicit grid )
The explicit grid is the one created with properties grid-template-rows and/or grid-template-columns. The implicit grid consists of the grid lines and grid tracks that Grid creates to hold items outside of the manually created grid with the grid-template-* properties.
显式网格是使用属性grid - template - rows和/或grid - template - columns创建的网 格 。 隐式网格由Grid创建的网格线和网格轨道组成 ，以保存具有grid - template- *属性的手动创建的网格之外的项目。
自动放置 ( Auto-placement )
When we create a grid like this:
当我们创建这样的网格时：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Even though we have only defined the columns, individual cells that are direct children of .grid lay themselves out in rows. This is because of the rules of auto-placement that are part of Grid.
即使我们仅定义了列，作为.grid的直接子元素的各个单元也将自己排成行。 这是因为Grid包含自动放置规则。
属性：网格自动列 ( Property: grid-auto-columns )
To define the size of the created columns, implicitly-created grid column tracks, which were not defined by grid-template-columns, use the grid-auto-columns property. The default value is auto; you can set it to any value you want.
要定义创建的列的大小，请使用grid - auto - columns属性来定义未由grid - template - columns定义的隐式创建的grid列轨道。 默认值为auto ; 您可以将其设置为所需的任何值。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-auto-columns: 50px;
}属性：网格自动行 ( Property: grid-auto-rows )
grid-auto-rows works similar to grid-auto-columns. To define the size of the created rows, implicitly-created grid row tracks, which were not defined by grid-template-rows, use the grid-auto-rows property. The default value is auto; you can set it to any value you want.
grid - auto - rows的工作方式类似于grid - auto - columns 。 要定义已创建的行的大小，可以使用grid - auto - rows属性来定义未由grid - template - rows定义的隐式创建的网格行轨迹。 默认值为auto ; 您可以将其设置为所需的任何值。
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}属性：网格自动流 ( Property: grid-auto-flow )
The grid-auto-flow property controls how grid cells get flowed into the grid: in rows or columns. The default value is row.
网格 - 自动 - 流属性控制网格单元如何以行或列形式流入网格。 默认值为row 。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-auto-flow: column;
}The grid cells in the above grid fill columns one by one until no items are left.
上面的网格中的网格单元将一一填充，直到没有剩余项目为止。
基于行的展示位置 ( Line-based Placement )
Placing items in a grid using line numbers is called line-based placement.
使用行号将项目放置在网格中称为基于行的放置。
属性：grid-row-start ( Property: grid-row-start )
If you want a specific grid item to start on a particular row line then you can have something like this:
如果您希望特定的网格项目从特定的行开始，则可以有如下所示：
.grid-item {
grid-row-start: 3;
}属性：网格行尾 ( Property: grid-row-end )
If you want a specific grid item to end on a particular row line then you can have something like this:
如果您希望特定的网格项目在特定的行行上结束，则可以使用以下内容：
.grid-item {
grid-row-end: 6;
}属性：grid-column-start ( Property: grid-column-start )
If you want a specific grid item to start on a particular column line then you can have something like this:
如果您希望特定的网格项目从特定的列行开始，则可以有如下所示：
.grid-item {
grid-column-start: 3;
}属性：grid-column-end ( Property: grid-column-end )
If you want a specific grid item to end on a particular column line then you can have something like this:
如果您希望特定的网格项在特定的列行上结束，则可以使用以下内容：
.grid-item {
grid-column-end: 6;
}属性：网格行和网格列 ( Property: grid-row and grid-column )
You may use the grid-row and grid-column properties to manually place and size grid items. Each property is the shorthand for their respective star and end properties: grid-row-start, grid-row-end, grid-column-start, and grid-column-end.
您可以使用网格 - 行和网格 - 列属性来手动放置和调整网格项目的大小。 每个属性都是它们各自的star和end属性的简写： grid - row - start ， grid - row - end ， grid - column - start和grid - column - end 。
Us a forward slash "/" to separate the start and end values:
我们使用正斜杠“ /”分隔起始值和结束值：
.grid-item {
grid-column: 3 / 5;
grid-row: 2 / 7;
}属性：网格区域 ( Property: grid-area )
You can use grid-area as a shorthand for both grid-row and grid-column. It works like this: / / / :
您可以将grid-area用作grid-row和grid-column的简写。 它是这样的：// //
.grid-item {
grid-area: 2 / 3 / 7 / 5;
}This code behaves the same as the code in the previous heading.
该代码的行为与上一个标题中的代码相同。
跨网格跨越元素 ( Spanning an element across the grid )
To span an element across the grid, you can use the grid-row or grid-column property. Set the starting line 1 and the ending line -1. Here 1 means the leftmost grid line and -1 means the rightmost grid line in the relevant axis. This would be opposite, in a right to left writing script, that is 1 meaning the rightmost line and -1 meaning the leftmost line.
要跨网格跨越元素，可以使用grid - row或grid - column属性。 设置起始行1和结束行-1。 此处1表示相关轴上最左边的网格线，-1表示相关轴上最右边的网格线。 在从右到左的书写脚本中，这是相反的，即1表示最右边的行，-1表示最左边的行。
.grid-item-weird {
grid-column: 1 / -1;
}If you want a single item to take up the entire grid, you can do this to both grid-row and grid-column:
如果您希望单个项目占据整个网格，则可以对grid - row和grid - column都这样做：
.grid-item-weird {
grid-row: 1 / -1;
grid-column: 1 / -1;
}Or simply:
或者简单地：
.grid-item-weird {
grid-area: 1 / 1 / -1 / -1;
}关键字：span ( Keyword: span )
Instead of explicitly defining the line numbers when using grid-row and grid-column, you may use the span keyword to state how many rows or columns the item should cover:
当使用grid - row和grid - column时 ，不用显式定义行号，而是可以使用span关键字来声明该项目应覆盖多少行或列：
.grid-item {
grid-column: 3 / span 2;
}You may also tack the item onto the ending line and span it across in the other direction. The code below achieves the same result as above:
您也可以将项目固定在终点线上，并在另一个方向上跨越。 下面的代码实现与上面相同的结果：
.grid-item {
grid-column: span 2 / 5;
}You may use span for rows the same way.
您可以以相同的方式对行使用span 。
术语：网格单元 ( Terminology: Grid Cell )
Grid Cell is the space between four intersecting Grid Lines just like a table cell.
网格单元格是四个相交的网格线之间的空间，就像表格单元格一样。
术语：网格区域 ( Terminology: Grid Areas )
Grid Areas are grid cell(s) taking up a rectangular area on the grid. They are created using named grid areas or line-based placement.
网格区域是在网格上占据一个矩形区域的网格单元。 它们是使用命名的网格区域或基于行的放置创建的。
属性：网格模板区域（和网格区域） ( Property: grid-template-areas (& grid-area) )
Instead of placing and sizing individual grid items with things like span, grid-column, etc, you may use what's called Template Areas. The grid-template-areas allows you to name areas of a grid so that they may further be filled up by grid items.
除了使用诸如span ， grid-column等之类的单个网格项目放置和调整大小之外，您可以使用所谓的模板区域。 网格 - 模板 - 区域允许您命名网格的区域，以便可以由网格项进一步填充它们。
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px 800px 100px;
grid-template-areas:
"header header header"
"sidebar-1 content sidebar-2"
"footer footer footer"
}Here a single pair of quotes represents a row of the grid. You could have it all in a single line and not align the columns, but I have done just so that it looks cleaner. So, first I have defined three columns and three rows and then named each cell. By having "header" repeated three times in the first row, what I'm telling CSS to do is to cover that whole thing with the grid item named header. The rest is likewise.
在这里，一对引号代表一行网格。 您可以将所有内容放在一行中，而不用对齐列，但是我所做的只是为了使它看起来更整洁。 因此，首先我定义了三列三行，然后为每个单元命名。 通过在第一行中重复“ header”三次，我告诉CSS要做的是用名为header的网格项覆盖整个过程。 其余的也一样。
Here's how you name each grid item to have the space that was defined for it using grid-template-areas:
这是使用网格 - 模板 - 区域命名每个网格项目以具有为其定义的空间的方式：
.header {
grid-area: header
}
.sidebar-1 {
grid-area: sidebar-1
}
.content {
grid-area: content
}
.sidebar-2 {
grid-area: sidebar-2
}
.footer {
grid-area: footer
}Nothing could ever be easier than that, especially other CSS methods for laying out content.
没有什么比这更容易了，尤其是其他用于布置内容CSS方法。
Previously, you have seen that grid-area is used for line-based positioning too.
以前，您已经看到grid-area也用于基于行的定位。
You may use a dot if you want to leave a cell empty:
如果您想将单元格留空，则可以使用点：
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 100px 800px 100px;
grid-template-areas:
"header header header"
"sidebar content sidebar"
"footer footer ."
}Here the footer ends with the second column.
在此，页脚以第二列结束。
属性：网格模板 ( Property: grid-template )
grid is shorthand for three properties: grid-template-rows, grid-template-columns, and grid-template-areas.
grid是三个属性的简写： grid - templates - rows ， grid - templates - columns和grid - templates - area 。
The way you use this is like this:
您的使用方式如下所示：
.grid {
grid-template:
"header header header" 80px
"nav article article" 200px
/ 100px auto;
}You define the template areas like you normally would, place the width of each row on its side and then finally place all the column widths after a forward slash. Like before, you can place all of it on a single line.
您可以像通常那样定义模板区域，将每行的宽度放在其侧面，然后最后将所有列的宽度放在正斜杠之后。 像以前一样，您可以将其全部放在一行上。
函数：repeat（） ( Function: repeat() )
The repeat() function helps to make grid tracks listings a little non-redundant and adds a bit of semantic layer to them. It is quite easy and intuitive to use. Let's have a look:
repeat （）函数有助于使网格跟踪列表略微非冗余，并为其添加一些语义层。 使用起来非常简单直观。 我们来看一下：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); // this is the same as 1fr 1fr 1fr
}You may repeat a certain pattern of track listing, as well, like this:
您也可以重复某种形式的曲目列表，如下所示：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
}The repeat() doesn't need to be the only part of the value. You may add other values before and after it. For example: grid-template-columns: 2fr repeat(5, 1fr) 4fr;.
repeat（）不必是值的唯一部分。 您可以在其前后添加其他值。 例如：grid-template-columns：2fr repeat（5，1fr）4fr;。
属性：网格 ( Property: grid )
grid is shorthand for six properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
grid是六个属性的简写： 网格 模板 行 ， 网格 模板 列 ， 网格 模板 区域 ， 网格 自动 行 ， 网格 自动 列和网格 自动 流动 。
First of all, you may use like grid-template like this (the previous example):
首先，您可以使用像grid-这样的 模板 （上一个示例）：
.grid {
grid:
"header header header" 80px
"nav article article" 200px
/ 100px auto;
}Second of all, it is not what it looks like: tThat is, grid is not like the property css:
第二，它不是它的外观：即网格不像属性css ：
Yes, you read that right: a property called css. The Shorthand for all CSS properties. I came across it in a revelatory experience during transcendental meditation involving CSS and whatnot. But I won't teach you how to use it. I'm keeping it for a future tutorial. Till then keep moving high on the ladder to CSS enlightenment.
是的，您没看错：一个名为css的属性。 所有CSS属性的简写。 我在涉及CSS和其他方面的超然冥想中的一次启发性体验中遇到了它。 但是我不会教你如何使用它。 我将其保留以备将来使用。 然后，继续向CSS启示的阶梯前进。
Third of all, you use grid a certain way. You can combine grid-template-rows with grid-auto-columns or you can combine grid-auto-rows with grid-template-columns. The syntax of these are pretty simple:
第三，以某种方式使用网格 。 您可以将网格 模板 行与网格 自动 列结合在一起，也可以将网格 自动 行与网格 模板 列结合在一起。 这些语法非常简单：
.grid-item {
/_ grid: / ; _/
/_ grid: / ; _/
} For example:
例如：
.grid-item-1 {
grid: 50px 200px 200px/ auto-flow 60px;
}
.grid-item-2 {
grid: auto-flow 50px / repeat(5, 1fr);
}Note that you actually use the keyword auto-flow before the value.
请注意，您实际上在该值之前使用了关键字自动流。
术语：装订线 ( Terminology: Gutters )
Gutter is the space that separates grid rows and grid columns individually. grid-column-gap, grid-row-gap, and grid-gap are the properties used to define gutters.
装订线是用于单独分隔网格行和网格列的空间。 grid - column - gap ， grid - row - gap和grid - gap是用于定义装订线的属性。
属性：网格行间隙 ( Property: grid-row-gap )
grid-row-gap is used to define the space between individual grid rows. It works like this:
grid - row - gap用于定义各个网格行之间的空间。 它是这样的：
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-row-gap: 10px;
}This spaces out the grid rows 10 pixels apart from each other.
这将网格行彼此隔开10个像素。
属性：网格-列间隙 ( Property: grid-column-gap )
grid-column-gap is used to define the space between individual grid columns. It works like this:
grid - column - gap用于定义各个网格列之间的空间。 它是这样的：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 10px;
}This spaces out the grid columns 10 pixels apart from each other.
这将网格列彼此隔开10个像素。
属性：间隙 ( Property: grid-gap )
grid-gap is the shorthand property that combines grid-column-gap and grid-row-gap. One value defines both gutters. For example:
grid - gap是结合了grid - column - gap和grid - row - gap的简写属性。 一个值定义两个装订线 。 例如：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}属性：订单 ( Property: order )
We can control the order of grid cells using the order property. Let's look at the following example:
我们可以使用order属性控制网格单元的顺序 。 让我们看下面的例子：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.grid .grid-cell:nth-child(5) {
order: 1;
}Above, the fifth grid cell is placed last in the grid because the other grid cells have no order defined at all. If defined, then the numerical order would be followed. Two or more grid cells can have the same order. The ones with the same order or no order at all are placed according to the logical order of the HTML document. Let's have a look here:
在上方，第五个网格单元被放置在网格的最后，因为其他网格单元根本没有定义顺序。 如果定义，则将遵循数字顺序。 两个或多个网格单元可以具有相同的顺序。 具有相同顺序或完全没有顺序的文件将根据HTML文档的逻辑顺序进行放置。 让我们在这里看看：
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
}
.grid .grid-cell {
order: 1
}
.grid .grid-cell:nth-child(5) {
order: 2;
}The above example produces identical results to the previous example.
上面的示例产生的结果与前面的示例相同。
函数：minmax（） ( Function: minmax() )
The minmax() function is new to CSS Grid Layout. This function gives us a way to specify the minimum as well as the maximum size for grid tracks.
minmax （）函数是CSS网格布局的新增功能。 此功能使我们可以指定网格轨迹的最小和最大尺寸。
Let's have a look at the following example:
让我们看下面的例子：
.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 1fr;
}With the above code in effect, on reducing the window width, the middle column retains its 100px width until the first and last columns are reduced to the width of their content. This is especially useful for making responsive layouts.
使用上面的代码，在减小窗口宽度时，中间列将保持其100px宽度，直到第一列和最后一列减小到其内容的宽度为止。 这对于制作响应式布局特别有用。
关键字：自动 ( Keyword: auto )
If the parent container's dimension is fixed, like a fixed width, the auto keyword as the width of a grid item will make the item fill the whole width of the container. In the case of multiple items, the space is divided just like frs. But if auto is used with fr, auto behaves as the width of the content of that item and the rest of free space is divided to make up frs.
如果父容器的尺寸是固定的（例如固定宽度），则auto关键字作为网格项目的宽度将使该项目占满容器的整个宽度。 在有多个项目的情况下，空间就像fr s一样被划分。 但是，如果将auto与fr ，则auto表现为该项目内容的宽度，剩余的可用空间被除以组成fr s。
函数：fitcontent（） ( Function: fitcontent() )
The fitcontent() function is used when you want the width/height to behave like auto but also have a maximum width/height in case you don't want it to get all the way that big.
当您希望宽度/高度表现得像auto一样，但又希望具有最大的宽度/高度时，可以使用fitcontent （）函数，以防您不希望其宽度变大。
.grid-item {
width: fitcontent(200px);
}Here it will, on the minimum side fit the content and on the maximum be as big as 200px.
在这里，它在最小方面适合内容，在最大方面最大为200px。
关键字：自动填充 ( Keyword: auto-fill )
You can use the auto-fill to fill the relevant axis (row or column) with the most number of grid tracks without overflowing. The way you achieve this is using the repeat() function:
您可以使用自动 填充功能以最大数量的网格轨迹填充相关的轴（行或列）而不会溢出。 实现此目的的方法是使用repeat （）函数：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}But this would reduce the flexibility of individual tracks. You can have both auto-fill functionality and flexibility by using minmax() with it.
但这会降低单个轨道的灵活性。 通过将minmax （）与自动填充功能同时使用，可以同时具有灵活性。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}This way, you can have at least one column and at most all columns of 50px in a particular browser width.
这样，您可以在特定浏览器宽度中至少包含一列，并且最多包含50px的所有列。
Note that auto-fill* creates grid tracks even though they may not be filled with cells.
请注意，即使自动填充*可能未用单元格填充，也会创建网格轨迹。
自动适应 ( auto-fit )
auto-fit behaves the same as auto-fill except that it collapses all empty repeated tracks. An empty track is one with no grid items placed in it or spanning across it.
自动 拟合的行为与自动 填充相同，不同之处在于它会折叠所有空的重复轨道。 空轨道是指没有放置网格项目或跨越网格项目的轨道。
稠密 ( dense )
With the help of the dense keyword, you can backfill items into empty grid cells which were created because of weird things you were trying to do like spanning and whatnot. Any span, you may use the dense keyword with grid-auto-flow like this:
借助density关键字，您可以将项目回填到空的网格单元中 ，这些网格单元是由于您尝试做的奇怪的事情而创建的，例如跨越和诸如此类。 在任何范围内，您都可以将密集关键字与grid - auto- 流一起使用，如下所示：
.grid {
display: grid;
grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
grid-auto-flow: dense;
}You can use this with an image gallery but be careful with something like a form. You mostly want the form sub-elements in a specific order.
您可以在图库中使用它，但要小心使用表单。 您通常需要特定顺序的表单子元素。
浏览器支持 ( Browser Support )
At the time of this writing, there is good browser support for CSS Grid Layout. According to caniuse.com, all major browsers support CSS Grid Layout except Internet Explorer 11 which has partial support with -ms- prefix and Opera Mini having no support at all.
在撰写本文时，浏览器对CSS Grid Layout有很好的支持。 根据caniuse.com的说法，除Internet Explorer 11带有-ms-前缀的部分支持和Opera Mini完全不支持的Internet Explorer 11之外，所有主流浏览器均支持CSS网格布局。
结论 ( Conclusion )
CSS Grid allows us to make layouts with more control, ease and speed than previous method systems. In this tutorial, we learned all major elements of Grid which includes creating tracks, positioning and sizing cells, and making the grid fluid and responsive with keywords like auto-fill and functions like minmax().
与以前的方法系统相比，CSS Grid使我们能够以更高的控制力，便捷性和速度来进行布局。 在本教程中，我们学习了Grid的所有主要元素，包括创建轨道，定位和调整单元格的大小，以及使网格流畅并响应诸如auto-fill类的关键字和诸如minmax()类的函数。
翻译自: https://scotch.io/tutorials/deep-dive-into-css-grid-2
css网格