将网格容器的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;
}

您可以看到codesanbox here。我想要的是通过过滤按钮的行的宽度来设置容器的宽度。如何实现这种布局？

Answer 1

这里您将按钮的宽度设置为170像素。我建议添加：

.container {
  width: 170px;
}

和更改

.filter-buttons {
  grid-template-columns: repeat(auto-fit, 100%);
}

您可以使用第一个规则来更改按钮和整个容器的宽度。我知道这并不完全符合您的要求，但这种方式对我来说更有意义。

更改容器的显示和边距以使其居中

.container {
  display: grid;
  margin: auto;
}