CSS网格：使网格上方的div与网格大小相同

Question

我创建了以下代码库作为示例：

https://codepen.io/latchkostov/pen/vYOVjjo使用以下html：

<div class="content">
  <div class="search">
      <input type="text" placeholder="search" class="search-input" />
  </div>
  <div class="grid">
    <div class="item">Card 1</div>
    <div class="item">Card 2</div>
    <div class="item">Card 3</div>
    <div class="item">Card 4</div>
  </div>
</div>

我希望网格上方的搜索输入与网格的尺寸相同。最初在分辨率足够大的设备上加载时，它们看起来是一样的，但是当您开始缩小浏览器视口的大小，以便每行只能容纳一张卡时，网格会变小，但是，上面的div包含不包含搜索输入。我想使搜索div具有反应性，以便为分辨率较小的用户调整大小。

也许有某种方法可以实际放入网格中，我只是不知道该怎么做。

Answer 1

您可以从网格卡上将尺寸作为'宽度'，并将尺寸设置为上述格。