Html 将网格容器div width设置为其中一个的宽度'；s行

我的布局如下所示：

<div class="container">
  <div class="input"></div>
  <div class="filter buttons"></div>
  <div class="content"></div>
</div>

你可以看到这张照片。我想让容器的宽度由带有过滤器按钮的行的宽度设置。我无法修复它，因为过滤器按钮的自动包装设置为

auto-fit

。由于内容采用全宽度，所以容器宽度由内容宽度设置。 我试图实现的是一个带有css网格的响应性布局，而不必使用媒体查询，其中容器将遵循

filter\u按钮的宽度。
所以，在小屏幕上看起来是这样的：


在更大的屏幕上也是这样：


如何实现这种布局？
宽度：0；最小宽度：100%
到内容分区？但是，按钮没有占用空间，它们可以共享一个屏幕截图来更好地解释您想要什么。我已经用我试图实现的屏幕截图更新了问题。您需要的可能是：
网格模板列：重复（自动拟合，最小值（170px，1fr））用于
。过滤器按钮
<编码>宽度：0；最小宽度：100%
到内容分区？但是，按钮没有占用空间，它们可以共享一个屏幕截图来更好地解释您想要什么。我已经用我试图实现的屏幕截图更新了问题。您需要的可能是：
网格模板列：重复（自动拟合，最小值（170px，1fr））用于
。过滤器按钮
？？
.container {
    display: grid;
    grid-row-gap: 30px;
    padding: 30px 15px;
}

.input {
    max-width: 350px;
}

.filter-buttons {
    display: grid;
    grid-template-columns: repeat( auto-fit, 170px);
    grid-gap: 10px;
}