CSS CSS网格随fr自适应增长，但使用minmax时宽度不超过100%

在本文中，我们将介绍CSS网格布局中使用fr和minmax属性时，宽度自适应增长的行为。我们将通过示例说明不同情况下的效果，并总结它们的差异。

阅读更多：CSS 教程

CSS网格布局

CSS网格布局是一种强大的布局系统，用于在网页中创建复杂的、多列和多行的布局。它可以将一个网页划分为各个部分，并使其具有自适应的特性。通过使用网格容器和网格项目，我们可以创建包含多个网格单元格的网格布局。

fr单位

fr单位是CSS网格布局中相对长度单位之一。它表示网格轨道剩余空间的一部分。例如，如果一个网格容器包含3个网格单元格，其中一个使用1fr单位，而其余两个使用2fr单位，那么这个网格容器的宽度会根据1:2:2的比例进行划分。也就是说，第一个单元格会占据容器宽度的1/5，而另外两个单元格会各自占据容器宽度的2/5。

fr单位的自适应增长

当使用fr单位来定义网格单元格的宽度时，它会自动根据容器的剩余空间进行调整。这意味着无论容器的宽度如何变化，fr单位所占据的宽度都会相应地进行自适应增长或缩小。这使得我们可以轻松地创建一个自适应的网格布局，适应不同尺寸的屏幕或容器。

让我们通过以下示例来说明。假设我们有一个网格容器，其中包含3个网格单元格，比例为2:1:1。其中，第一个单元格使用1fr单位，而其余两个使用2fr单位。这意味着第一个单元格会占据剩余空间的1/4，而其他两个单元格会各自占据剩余空间的1/8。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
}

现在，如果我们将该网格容器嵌套在一个宽度为500px的父容器中，并进行水平缩放，那么第一个单元格的宽度将自动根据剩余空间进行调整。当父容器的宽度减小到250px时，第一个单元格的宽度将变为125px，而其他两个单元格将变为62.5px。

这种自适应的特性使得使用fr单位来定义网格单元格的宽度非常方便，特别是在创建响应式布局时。

minmax函数

minmax函数是CSS网格布局中的一个有用工具，用于定义网格单元格的宽度范围。它接受两个参数，分别定义最小宽度和最大宽度。例如，使用minmax(100px, 200px)来定义一个网格单元格的宽度范围为100px至200px。

.grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 200px) 2fr 2fr;
}

当我们在网格容器中使用minmax函数来定义网格单元格的宽度时，它会先根据最小宽度进行布局。当剩余空间大于最小宽度时，网格单元格的宽度将自动适应增长。但是，当剩余空间超过最大宽度时，网格单元格的宽度将停止增长。

fr和minmax的差异

尽管fr和minmax功能上有些类似，但它们在网格布局中宽度增长的行为上存在一些差异。

当使用fr单位定义网格单元格的宽度时，它会根据容器的剩余空间进行自适应增长，无论容器的宽度如何变化。这种自适应增长的行为使得fr单位适用于创建响应式布局。

与之不同的是，当使用minmax函数定义网格单元格的宽度时，它会在超过最大宽度时停止增长。这意味着当剩余空间超过最大宽度时，网格单元格的宽度将不会继续增加。这种限制的行为使得minmax函数适用于需要限制网格单元格宽度范围的情况。

示例说明

让我们通过一个示例来说明fr和minmax在网格布局中的差异。

假设我们有一个网格容器，其中包含3个网格单元格，比例为2:1:1。第一个单元格使用1fr单位，第二个单元格使用minmax函数定义宽度范围为100px至200px，第三个单元格也使用1fr单位。代码如下所示：

.grid-container {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 200px) 1fr;
}

现在，让我们将该网格容器嵌套在一个宽度为400px的父容器中，并进行水平缩放。

当父容器的宽度小于400px时，第一个和第三个单元格的宽度将自适应缩小，而第二个单元格的宽度将保持在其最小宽度100px。

当父容器的宽度增加到超过400px时，第一个和第三个单元格的宽度将自适应增长，而第二个单元格的宽度将保持在其最大宽度200px。

这个示例展示了fr和minmax在网格布局中宽度自适应增长的差异。fr可以自动填充剩余空间，而minmax函数则会限制宽度范围。

总结

通过本文，我们了解了在CSS网格布局中使用fr和minmax属性时，宽度自适应增长的行为。我们明白了fr单位会根据容器的剩余空间进行自动调整，而minmax函数则会在超过最大宽度时停止增长。这两种属性在网格布局中有着不同的应用场景，可以根据具体的需求来选择使用。

CSS网格布局是一种强大的布局系统，它提供了丰富的布局选项和灵活性。通过使用fr和minmax属性，我们可以轻松地控制网格单元格的宽度，并创建出多样化的网页布局。无论是响应式设计还是固定宽度的布局，都可以通过使用fr和minmax来实现。

然而，在使用这两个属性时需要注意一些差异和适用场景。fr单位适用于需要自适应增长的情况，特别是在创建响应式布局时非常方便。而minmax函数适用于需要限制网格单元格宽度范围的情况，可以通过设置最小宽度和最大宽度来控制单元格的大小。

在实际应用中，我们可以根据具体的设计需求来选择适合的属性。如果我们希望创建一个自适应布局，让网格单元格根据剩余空间来自动调整宽度，那么可以使用fr单位。而如果我们希望限制单元格的宽度范围，或者需要一个固定宽度的单元格，那么可以使用minmax函数。

总之，了解fr和minmax属性在CSS网格布局中的行为差异以及适用场景，可以帮助我们更好地掌握网格布局的强大功能。通过灵活运用这些属性，我们可以创建出各种各样的网页布局，满足不同的设计要求。在实践中不断尝试和调整，我们将能够掌握CSS网格布局，并创建出优秀的网页设计。