minmax css_CSS网格：Minmax（）具有更大的灵活性

可能使人们无法尝试CSS Grid的一件事是，在定义网格布局和放置内容时有太多选择，因此直到您使用了一段时间之后，才可能很难知道成为特定布局的最佳选择。 直到最近，我才完全意识到minmax()以及在编码我需要构建的许多布局时如何成为如此巨大的帮手，所以我想分享一种方法对我有益。

minmax()是可以在grid-template-columns或grid-template-rows属性中使用的函数，用于调整网格轨迹的大小。 它需要（您猜对了）最小值和最大值，可以是长度（像素，ems等），百分比，灵活的fr单位或关键字。 这是一篇很好的文章，对它进行了深入的解释 。 Jen Simmons还在她的Layout Land频道的一集中讨论了minmax()和layout的未来。

minmax()有很多有用的方法，但是我想特别说明一种方法。 许多常见的布局都有一个“包装”网格，需要将视口（带有一些填充）填充到某个断点（例如1200px），然后再增大。 内容有时需要流到视口的边缘，但在大多数情况下都与此包装器对齐。

在构建网格方面，我们需要的是：

• 12个等宽列，占可用空间的百分比，最大为最大值（1200像素（减去装订线）除以12（列数））。
• 两侧各有一个灵活的“填充”列，最小值为20px，在我们的任意断点之后，它将填充剩余的空间。

直到最近，我一直在编码这些布局的方式是将断点设置为稍微超过包装宽度（加上填充列），在该宽度处更改布局中的值：

.grid {
	display: grid;
	grid-template-columns: 20px repeat(12undefined 1fr) 20px;

	@media (min-width: 1200px) {
		grid-template-columns: 1fr repeat(12undefined $col) 1fr;
	}
}

在断点之前，我们的布局包括12个灵活的列（使用fr单位）和两个固定的“填充”列。 在1200px的最小宽度断点处，我将布局重新定义为具有12个固定宽度的列和两个灵活的填充列。 我可以使用CSS变量使此代码更具可维护性（ 正如我在其他地方所写的 ），但实际上我没有充分利用CSS Grid。

这也有一些缺点：如果更新任何值，则需要确保相应地调整所有其他值。 另外，如果我的计算量稍有减少，我会在断点附近发生一些不良影响，在该断点处，我的网格列实际上占用的空间超过了可用空间。

因此，现在我意识到自己一直在为自己创建不必要的工作，该怎么办？

通过聪明地使用minmax() ，我实际上可以完全取消媒体查询。 过去，我曾尝试使用minmax()做类似的事情，但是在没有完全理解我需要中央列（网格术语中的“ tracks”）灵活的情况下，外部列需要固定，并且反之亦然。 当您希望列灵活而其他列固定时，具有这样布局的键是明确的。

例子1

演示地址

在第一个示例中，我们的列灵活地增长（使用fr单位），但不受最大宽度的约束，因此无论视口有多宽，它们都将不断增长。 我们所有的列都是相等的宽度，包括两个填充列：

.grid {
	display: grid;
	grid-template-columns: repeat(14undefined 1fr);
	grid-gap: 10px;
}

例子2

演示地址

在这里，我要介绍minmax()来确定中央网格轨道的大小。 通过设置为auto最小值，我可以确保列的宽度足以容纳内容–空列将在包含以下内容的列之前折叠：

.grid {
	display: grid;
	grid-template-columns: 1fr repeat(12undefined minmax(autoundefined $col)) 1fr;
	grid-gap: 10px;
}

自动与零

要注意的一件事是，将auto的最小值设置为0并将最小值设置为0 。 在下面的演示中，虽然在较大的视口中可能并不明显，但是如果您调整浏览器的大小，则会在两个网格的第一个网格中看到所有列以相同的速率折叠，而在第二个网格中，第一列保持足够的宽度以适合内容。

见笔CSS网格MINMAX（）由米歇尔·巴克（ @michellebarker ）上CodePen 。

回到示例2，如果您调整窗口的大小，则可以看到我们的填充轨迹完全消失。 我们要为这些列保持最小宽度，因此我们在这里也需要minmax() 。

例子3

这是我们想要的布局：

演示地址

在这里，我们为填充列指定最小值20px，并在空间允许时允许它们增长（使用灵活的fr单位）。 同时，我们对中心列进行相反的操作，指定我们希望它们在达到计算出的$col值之前一直保持灵活性，然后再不增大。

.grid {
	display: grid;
	grid-template-columns: minmax(20pxundefined 1fr) repeat(12undefined minmax(autoundefined $col)) minmax(20pxundefined 1fr);
}

当我意识到这是我一直在构建的布局编码的一种简单得多的方式时，我肯定有一个“ d'oh”的时刻！ 但是CSS Grid如此新颖，与我们之前在CSS中所拥有的不同，并且为构造布局提供了很多选择，以至于确实需要很多人在现实世界中使用它来完全理解可能的情况。 我希望我可以帮助其他人今天更轻松地使用CSS Grid！

翻译自: https://css-irl.info/more-flexibility-with-minmax/