css网格

The most common things you learn in CSS Grid is usually related to the grid container and less about 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 can only help with very little cases.

您在CSS Grid中学习的最普通的知识通常与网格容器有关，而与网格项有关的则较少。 应用于网格容器的通用网格定义对于基本布局结构而言已足够。 但是，当您需要对网格内容进行更多控制时，网格容器只能在很少的情况下提供帮助。

Maybe you 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行。或者，当您不知道运行时间如何时，您可能希望该项目跨越到最后一个网格列跟踪网格列轨道的总数为。

Or maybe you want a masonry grid where images with different aspect ratios are fitted into a single grid:

或者，也许您想要一个砖石网格，将具有不同长宽比的图像装配到一个网格中：

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.

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

( )

Everything in the browser has a default style. Maybe 0; maybe auto. Maybe any other defaults which 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 next you see a grid like the one above, keep it at the back of your mind that each item in that grid has a placement value now 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 see how wild we can get when we 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;

[Warning] There is usually a subtle source of confusion here. Earlier when we defined this grid, we did so with 5 columns, grid-template-columns: repeat(5, 1fr). In that case, when we ask a grid item to start at 1 and end at 5, does that not mean it should span the entire row?

[警告]通常，这里有一些细微的混乱之源。 早先定义此网格时，我们使用5列grid-template-columns: repeat(5, 1fr) 。 在那种情况下，当我们要求一个网格项从1开始到5结束时，这是否意味着它应该跨越整个行？

No. It does not span from the first track, instead it spanning starts from a line and ends at a line. Therefore, we were saying start at line 1 and end at line 5:

不。它不从第一条轨道跨越，而是从一条线开始到一条线结束。 因此，我们说的是从第1行开始，到第5行结束：

[Warning ends]

[警告结束]

Placing Rows You guessed quite right if your guess was that the same rules apply to row-placing:

放置行如果您猜测相同的规则适用于行放置，则您猜对了：

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

But, there is a but. grid-row-[x] will:

但是，有一个。 grid-row-[x]将：

1. Reset the grid item default placement to start at column line 1 and row line 1
   重置网格项目默认位置以从第1行和第1行开始
2. Then the placement spanning will occur
   然后将发生展示位置跨越

22 left its spot and moved up to lines 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;    }

When ONLY Start or End is Provided

仅提供开始或结束时

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:

您不必成对提供放置属性。 您可以只提供一个，其余的将保留为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 specfied 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:

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

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

The Placement Shorthand There’s a shorthand syntax for grid-[x]-start and grid-[x]-end that allows you to do away with the -start and -end part:

放置快捷方式 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 _/    }

( )

We have been using the word “span” to describe the amount 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.

我们一直使用“ span”一词来描述某个位置应占用的磁道数量。 当我们说1号线5，我们说的电网项目应涵盖从1到5，我通常把这种现象称为隐跨越。

There is a span keyword that serves as a value. When this is used, I prefer to 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关键字用作值。 使用此功能时，我更喜欢将其称为显式扩展。 放置和扩展足够灵活，您可以将隐式和显式扩展都用作单个属性的值。

Henceforth, we will just stick with the shorthand since it’s more terse.

从今以后，我们将继续使用速记，因为它更简洁。

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 go crazy:

但是我们可以发疯：

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

You can read the above as: “end at 5, the span 2 tracks backward”:

您可以将上面的内容读为：“在5处结束，跨度2向后跟踪”：

Another example:

另一个例子：

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

Which is just a more intuitive way of saying: “Start at col line 2 and end at col line 4 (after 2 jumps)”:

这只是一种更直观的说法：“从第2行开始，到第4行结束（跳了2次）”：

Spanning Rows Everything you have learned so far in this post about rows applies without any exception. So don’t expect any surprises:

跨越行到目前为止，您在本文中所学到的关于行的所有内容均无例外地适用。 因此，不要期待任何意外：

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

We are still spanning the first time but this time we are spanning on the row axis. The browser will draw the box down to occupy 5 tracks:

我们仍然是第一次跨度，但是这次我们跨度在行轴上。 浏览器将下拉框以占据5条轨道：

( )

Recall that we have explicitly defined our grid to have 5 columns. What do you think would happen if we span or place an item from column 6 up:

回想一下，我们已经明确定义了网格以具有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 _/    }

Golden rule: Implicit tracks will be created to accommodate them

黄金法则 ：将创建隐式轨道以容纳它们

( )

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.

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

The following code:

如下代码：

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

is the direct opposite of:

与以下内容直接相反：

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

Since we are starting at the end to draw backwards 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 feel up such spaces created in such case (if the content is not symmetric).

如上所述，由于我们从结尾开始向后抽，因此第1列中的项目2会有空间，因此它会被下推。 我们将研究使用密度来感受在这种情况下（如果内容不是对称的）创建的此类空间。

There is a great hack that you can use to 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 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行）。

[Warning]

[警告]

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

负整数值hack在隐式网格上不起作用。 因此，由于我们仅在网格容器中定义了列和行，因此不会做任何事情：

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

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

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

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

[Warning end]

[警告结束]

( )

In the previous examples, you must have seen some placement or spanning that caused empty spaces scattered in the middle of a grid. Here is an example of one:

在前面的示例中，您必须已经看到某些放置或跨度导致网格中间散布着空白空间。 这是一个示例：

Well you can close this spaces using grid-auto-flow property on the grid container to close up those white spaces:

好吧，您可以使用网格容器上的grid 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。

翻译自:

css网格