css - 如何使我的 CSS 网格响应并填满我的完整容器？

Question

我的网格现在有一个问题，它在两侧留下了这个空白区域(红色圆圈):

当我缩小屏幕尺寸并重新格式化网格时，情况会变得更糟:

我想要这样我的所有元素都会跨越我的容器的整个宽度并填满这个空白空间，这样它就会与我的搜索栏保持一致。换句话说，我不想在我的网格两边有这个额外的空间:

这是我的 CSS 网格代码。

.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;

    /* grid-template-columns: repeat(auto-fit, minmax(226px, 360px)); */
    grid-template-columns: repeat(auto-fill, 226px);
}

如您所见，我也尝试了注释掉的行，但这也不起作用。我也尝试了 auto-fit，但它也没有做任何事情。我尝试了 width: 100% 以及 gap: auto 但它们都不起作用。我如何用我的网格填充这个空间？以下是具有相同问题的片段。

.full-card {
    background-color: #6a90c9;
    width: 226px;
    height: 289px;
}

.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;

    /* grid-template-columns: repeat(auto-fit, minmax(226px, 360px)); */
    grid-template-columns: repeat(auto-fill, 226px);
}

<div class="container" style="padding: 50px;">       
  <div class="grid">

            <div class="full-card">
            </div>
           <div class="full-card">
            </div>
           <div class="full-card">
            </div>
           <div class="full-card">
            </div>
      </div>
 </div>
  

提前致谢

Answer 1

你可以试试 justify-content: space-between;

.container {
  display: flex;
  flex-direction: column;
}
.grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 226px);
}
.search {
  wisth: 100%;
  mergin-bottom: 5px;
}

<div class="container">
  <input class="search" type="text" placeholder="Search..." />
  <div class="grid">
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
    <img src="https://picsum.photos/250" />
  </div>
</div>