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

Question

我的网格现在有一个问题，它在两侧留下空白 space（红色圆圈）：

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

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

这是我的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 但它们都不起作用。如何用我的网格填充此 space？下面是一个有同样问题的片段。

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

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

How do I make my CSS grid responsive and fills up my full container?

css

css-grid