html - 将网格容器 div 宽度设置为其行之一的宽度

Question

我有一个看起来像这样的布局：

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

这是他们的造型：

.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;
}

您可以在此处查看代码框。我想要的是通过带有过滤器按钮的行的宽度设置容器宽度。我无法修复它，因为过滤器按钮设置了自动换行auto-fit。并且由于内容占全宽度，因此容器宽度由内容宽度设置。我想要实现的是使用 css 网格进行响应式布局，而不必使用媒体查询，其中容器将遵循filter_buttonsdiv 的宽度。所以，它在小屏幕上看起来像这样：

像这样在更大的屏幕上：

我怎样才能实现这种布局？

标签： htmlcsscss-grid