css网格_在CSS网格中放置，扩展和密度

css网格

介绍 (Introduction)

The most common thing you learn in CSS Grid is usually related to the grid container and rather than the grid items. A generic grid definition applied to the grid container is enough for a basic layout structure. However, when you need more control over the contents of the grid, the grid container is limited its uses.

您在CSS Grid中学习的最常见的知识通常与网格容器有关，而不是与网格项有关。应用于网格容器的通用网格定义对于基本布局结构就足够了。但是，当您需要对网格内容进行更多控制时，网格容器将受到限制。

For example, you may want a 4 x 2 grid but the first grid item should take up column 1 and 2 as well as row 1 and 2. Or maybe you want an item to span till the last grid column track when you have no idea what the runtime total number of the grid column track is.

例如，您可能需要4 x 2的网格，但第一个网格项目应占据第1列和第2列以及第1列和第2行。或者，如果您不知道某个项目，则该项目要跨越到最后一个网格列轨道为止网格列跟踪的运行时总数是多少。

Each grid item’s size is predefined and you need to find a way to size them relatively to other items in the grid container.

每个网格项目的大小都是预定义的，您需要找到一种方法来相对于网格容器中的其他项目调整它们的大小。

In this tutorial you’ll explore placing, spanning, and density in CSS Grid.

在本教程中，您将探索在CSS Grid中的放置，扩展和密度。

放置网格项：从此处开始，从此处结束 (Placing Grid Items: Start Here, End There)

Everything in the browser has a default style, for example, 0 or auto. There could also be other defaults that you need to be aware of before adjusting for custom values. When you have a grid, the grid items have placement values defined by grid-[x]-start and grid-[x]-end (where x can be column or row). The value is auto.

浏览器中的所有内容均具有默认样式，例如0或auto 。在调整自定义值之前，可能还需要了解其他默认值。当您有网格时，网格项的放置值由grid-[x]-start和grid-[x]-end (其中x可以是column或row )定义。该值为“ auto”。

When you see a grid layout, it can help to remember that each item in that grid has a placement value no matter how symmetric the flow looks:

当您看到网格布局时，无论流程看起来多么对称，都可以帮助记住该网格中的每个项目都有一个放置值：

.container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(5, 1fr)
    }

    .item {
      grid-column-start: auto; /_ default _/
      grid-column-end: auto; /_ default _/
      grid-row-start: auto; /_ default _/
      grid-row-end: auto; /_ default _/
    }

放置列 (Placing Columns)

Let’s adjust these default values starting with columns:

让我们从列开始调整这些默认值：

.item:nth-child(1) {
      grid-column-start: 1;
      grid-column-end: 5;
    }

We want the first item in the grid .item:nth-child(1)
我们想要网格中的第一项.item:nth-child(1)
To start at line one, grid-column-start: 1;
从第一行开始， grid-column-start: 1;
And end at line 5, grid-column-end: 5;
并在第 5 行结束， grid-column-end: 5;

See the full code here.

在此处查看完整代码。

放置行 (Placing Rows)

The same rules apply to row-placing:

相同的规则适用于行放置：

.item:nth-child(22) {
      grid-row-start: 1;
      grid-row-end: 4;
    }

However, grid-row-[x] will reset the grid item default placement to start at column line 1 and row line 1, then the placement spanning will occur.

但是， grid-row-[x]会将网格项目的默认放置重置为从第1行和第1行开始，然后会发生放置跨越。

You’ll see in this code that line 22 left its spot and moved up to line 1 before spanning.

您会在这段代码中看到第22行离开了它的位置，并在跨越之前移到了第1行。

If you want it to stay at its original column track, then you have to explicitly state that:

如果希望它停留在其原始列轨道上，则必须明确声明：

.item:nth-child(20) {
      grid-column-start: 3;
      grid-row-start: 5;
      grid-row-end: 10;
    }

You can provide only start or end—you do not have to provide the placing properties in pairs. You can just provide one and the rest will stay as auto (default). The tricky thing to watch out for is that if you change only the value of grid-[x]-start, the grid item will start at the line, not the track:

您只能提供start或end ，而不必成对提供放置属性。您可以只提供一个，其余的将保留为auto (默认)。要留意的棘手的事情是，如果你改变只值grid-[x]-start ，电网项目将在该行，而不是赛道开始：

.item:nth-child(1) {
      grid-column-start: 5;
    }

On the other hand, if you specify end only, it will start from the specified end value and span the grid inversely. For example, if you tell item 10 to end at 3, it will start from the nearest next line 2 and draw to line 3:

另一方面，如果仅指定end ，则它将从指定的结束值开始，并以相反的方式跨越网格。例如，如果您告诉项目10在3结束，它将从最近的下一行2并绘制到第3行：

.item:nth-child(10) {
      grid-column-end: 3;
    }

You can see all the code here.

您可以在此处查看所有代码。

There’s also shorthand syntax for grid-[x]-start and grid-[x]-end that allows you to do away with the -start and -end code:

grid-[x]-start和grid-[x]-end还有速记语法，使您-start和-end代码：

.item {
      grid-column: [start] / [end];
      grid-row: [start] / [end];
    }

Here are some examples that can replace the code samples we have written so far:

以下是一些示例，可以代替我们到目前为止编写的代码示例：

.item {
      grid-column: 1 / 5; /__ Line 1 to 5 /
      grid-row: 1 / 4; /*_ Line 1 to 4 __/
      grid-column: 5 / auto; / Line 5 to 6 *_/
      grid-column: auto / 3; /_ Line 2 to 3 _/
    }

跨度：从此处开始/结束，取n (Spanning: Start/End Here, Take n)

We have been using the word “span” to describe the number of tracks a placement should occupy. When we say line 1 to 5, we are saying the grid item should span from 1 to 5. I usually refer to this as implicit spanning.

我们一直使用“跨度”一词来描述一个放置位置应占用的磁道数量。当我们说1到5行时，我们说的是网格项的范围应该从1到5 。我通常将其称为隐式扩展。

There is a span keyword that serves as a value. When this is used, you can refer to it as explicit spanning. Placing and spanning are flexible enough that you can use both implicit and explicit spanning as value to a single property.

有一个span关键字用作值。使用此功能时，可以将其称为显式扩展。放置和扩展足够灵活，您可以将隐式和显式扩展都用作单个属性的值。

跨栏 (Spanning Columns)

Let’s start with looking at how we can span an item across a column track:

让我们从如何跨列跟踪跨项目开始：

.item:nth-child(1) {
      grid-column: span 5;
    }

This is an alternative to the first example we wrote:

这是我们编写的第一个示例的替代方法：

.item:nth-child(1) {
      grid-column: 1 / 5;
    }

But we can include additional detail:

但是我们可以包括更多细节：

.item:nth-child(1) {
      grid-column: span 2 / 5;
    }

Here we end at 5 and the span 2 tracks backward.

在这里，我们在5结束，跨度2向后跟踪。

Another example:

另一个例子：

.item:nth-child(1) {
      grid-column: 2 / span 2;
    }

Here we start at column line 2 and end at column line 4 (after 2 jumps).

在这里，我们从第2列开始，到第4列结束(经过2次跳转)。

跨行 (Spanning Rows)

Everything you have learned so far in this tutorial about rows applies without exception:

到目前为止，您在本教程中学到的所有关于行的内容都毫无例外地适用：

.item:nth-child(1) {
      grid-column: 2 / span 2;
      /_ highlight line_/
      grid-row: span 5
    }

We are still spanning the first time, but then we’re spanning on the row axis. The browser will draw the box down to occupy five tracks.

我们仍然是第一次跨越，但是随后我们跨越行轴。浏览器将下拉该框以占据5条轨道。

多余的放置和跨度 (Excess Placement and Spanning)

Recall that we have explicitly defined our grid to have 5 columns. We can span or place an item from column 6 up like the following:

回想一下，我们已经明确定义了网格以具有5列。我们可以像下面这样跨第6列放置或放置一个项目：

.item:nth-child(1) {
      grid-column: span 10; /_ 1 _/
      grid-column: 1 / 10; /_ 2 _/
      grid-column: 7 / 10; /_ 3 _/
      grid-column: 1 / span 10; /_ 4 _/
    }

Implicit tracks will be created to accommodate them.

隐式轨道将被创建以容纳它们。

负整数作为值 (Negative Integers as Values)

Negative integers are as useful as the positives—they inverse the placement or spanning. Hence, instead of starting from the first column or row, the placement or spanning will start from the last column or row.

负整数与正数一样有用-它们使位置或跨度相反。因此，放置或扩展不是从第一列或第一行开始，而是从最后一列或第二行开始。

These code snippets are direct opposites:

这些代码段是直接相反的：

.item:nth-child(1) {
      grid-column: 1 / 5
    }

.item:nth-child(1) {
      grid-column: -1 / -5
    }

Since we are starting at the end to draw backward as I mentioned above, there will be room for item 2 in column 1 so it gets pushed down. We will look at using density to fill up these spaces created in such cases (if the content is not symmetric).

如上所述，由于我们从最后开始向后拉，因此第1列中的项目2会有空间，因此它会被下推。我们将研究使用密度填充在这种情况下创建的这些空间(如果内容不是对称的)。

There is a way that you can span to the end of a column or row without needing to know how many columns are defined by the grid container. This is useful when you are using auto-fill or auto-fit in defining a dynamic grid:

有一种方法可以跨越到列或行的末尾，而无需知道网格容器定义了多少列。当您在定义动态网格时使用自动填充或自动拟合时，这很有用：

.item:nth-child(1) {
      grid-column: 1 / -1
    }

Specifying -1 for row end or column end will make the grid item span till the end of grid starting at what ever start you provided (in this case line 1).

为行尾或列尾指定-1将使网格项跨度一直到网格末尾(从您提供的起点开始)(在本例中为第1行)。

However, this does not work on implicit grids. Therefore since we defined only column and row in the grid container, this will not do anything:

但是，这不适用于隐式网格。因此，由于我们仅在网格容器中定义了列和行，因此不会做任何事情：

.item:nth-child(1) {
      grid-row: 1 / -1;
    }

For it to work, you would have to give an explicit row definition to the grid container. For example:

为了使它起作用，您必须为网格容器提供一个明确的行定义。例如：

.container {
      grid-template-rows: repeat(10, 30px);
    }

密度 (Density)

In the previous examples, you will have seen some placement or spanning that caused empty spaces scattered in the middle of a grid.

在前面的示例中，您将看到一些放置或跨度导致网格中间散布着空白空间。

You can close these spaces using grid-auto-flow property on the grid container to close up those white spaces:

您可以使用grid-auto-flow容器上的grid-auto-flow属性关闭这些空间，以关闭这些空白：

.container {
      grid-auto-flow: dense;
    }

One thing you should be aware of is that if you have symmetric content that needs to follow an order, making the flow dense will distort that order. This is a trade-off you have to make if you want a compact design while still placing grid items irregularly.

您应该意识到的一件事是，如果您有需要遵循顺序的对称内容，则使流变得密集会扭曲该顺序。如果要紧凑的设计同时仍不规则地放置网格项目，则必须进行权衡。

Notice how after placing item 1 at the end, the grid comes back to continue placing 2 at the beginning of the tracks.

请注意，在将项目1放置在末尾之后，网格又回到了如何继续在轨道的开头放置2位置。

结论 (Conclusion)

In this tutorial, we explored CSS Grid: placing, spanning, and density.

在本教程中，我们探讨了CSS网格：放置，扩展和密度。

翻译自: https://www.digitalocean.com/community/tutorials/placing-spanning-and-density-in-css-grid

css网格