minmax和maxmin_具有自动填充和minmax功能的灵活尺寸网格

minmax和maxmin

Various unimplemented parts of the CSS Grid Layout specification are making their way into browsers, and I was excited to see that the auto-fill keyword and minmax() function are appearing. At the time of writing these examples work best in Firefox Nightly or Developer Edition.

CSS Grid Layout规范的各个未实现部分正在进入浏览器，我很高兴看到出现了auto-fill关键字和minmax()函数。 在撰写本文时，这些示例在Firefox Nightly或Developer Edition中效果最佳。

自动填充和自动调整 (auto-fill and auto-fit)

When creating a grid on an element we can use the repeat() keyword to repeat all or part of our track definition. The following definition would create a grid with 10, 100 pixel width column tracks.

在元素上创建网格时，我们可以使用repeat()关键字重复全部或部分轨道定义。 以下定义将创建一个具有10个，100个像素宽度的列轨道的网格。

.wrapper {
 grid-template-columns: repeat(10, 100px);
}.wrapper {
 grid-template-columns: repeat(10, 100px);
} 

We could create 10 flexibly sized equal width tracks by using the fr unit.

通过使用fr单位，我们可以创建10个尺寸灵活的等宽轨道。

What this wouldn’t let us do however is to ask grid to create as many tracks of a certain size as would fit into the viewport, or other containing element. We will always have a grid of ten column tracks – fixed width in the first example or flexible in example 2. What would be nice would be to get a grid of as many tracks as possible of a certain size as could fit into the container. This is what auto-fill and auto-fit do.

但是，这不允许我们做的是让grid创建与视口或其他包含元素一样多的一定大小的轨道。 我们将始终有一个由十个列轨道组成的网格–在第一个示例中为固定宽度，在示例2中为灵活。最好是将一个尽可能多的具有一定大小的轨道的网格放入容器中。 这就是自动填充和自动调整功能。

To create a grid with as many 100 pixel tracks as will fit in the container we can use the auto-fill keyword rather than a number.

要创建一个网格，并在容器中容纳多达100个像素的轨迹，我们可以使用auto-fill关键字而不是数字。

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

According to the spec this will create a grid with as many tracks as will fit into the container, and will taking any grid-gap value into account,

根据规范，这将创建一个网格，其中包含与容器匹配的尽可能多的轨道，并将网格间距值考虑在内，

“ the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking grid-gap into account)”

“重复次数是最大可能的正整数，不会导致网格溢出其网格容器（如果确定的话，将每个轨道作为其最大轨道缩放函数，否则将其作为其最小轨道缩放函数，并采用网格间隔考虑在内）”

You can then use grid auto-placement to place items on this grid. Or position items if you had some idea of available tracks. If you use the auto-fill keyword empty tracks will remain as part of the grid. If you were to use the alternate auto-fit keyword, this would behave in the same way as described above but once all grid items have been placed any completely empty tracks will be dropped.

然后，您可以使用网格自动放置在该网格上放置项目。 如果您对可用曲目有所了解，也可以定位项目。 如果使用自动填充关键字，则空轨道将保留为网格的一部分。 如果您要使用替代自动拟合关键字，则其行为与上述方法相同，但是一旦放置了所有网格项目，所有完全空白的轨道都将被丢弃。

minmax（） (minmax())

To achieve a truly flexible grid – flexible both in size of tracks and number – we need an additional piece of the puzzle – minmax(). We can give this function a minimum and maximum size that we want our track to be. So the following would make tracks a minimum of 100 pixels and a maximum of 200 pixels.

为了获得真正灵活的网格-轨道大小和数字都灵活-我们需要另外一块拼图– minmax（） 。 我们可以给这个函数一个最小和最大的大小，这是我们想要的轨迹。 因此，以下内容将使轨道最小为100像素，最大为200像素。

Still not fully flexible though. So instead we could use the fraction unit as our maximum value. This would result in tracks of a minimum of 100 pixels and a maximum of 1 fraction unit of the available space. After as many 100 pixel tracks are assigned, we then have the remaining space to distribute. Our tracks are allowed to be greater than 100 pixels wide so the remaining space is equally distributed. The result as many equal width, flexible sized columns as can fit inside the container.

仍然没有足够的灵活性。 因此，我们可以使用分数单位作为最大值。 这将导致磁迹最小为100像素，最大为可用空间的1个分数单位。 在分配了多达100个像素轨道之后，我们便有剩余的空间可以分配。 我们的轨道允许大于100像素宽，因此剩余空间将平均分配。 结果是可以在容器内部容纳尽可能多的等宽，灵活尺寸的列 。

.wrapper {
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}.wrapper {
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
} 

You can see an example of this behaviour – assuming you have Firefox Nightly or another browser supporting this very new feature – in the CodePen below.

您可以在下面的CodePen中看到此行为的示例-假设您有Firefox Nightly或其他支持此新功能的浏览器。

See the Pen Grid by Example 29: minmax() and spanning columns and rows by rachelandrew (@rachelandrew) on CodePen.

请参见示例29的笔网格：minmax（）以及 CodePen上的rachelandrew （ @rachelandrew ） 跨越列和行 。

翻译自: https://rachelandrew.co.uk/archives/2016/04/12/flexible-sized-grids-with-auto-fill-and-minmax/

minmax和maxmin