时间戳

首页 > 解决方案 > 如何让我的 CSS 网格响应并填满我的完整容器？

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

问题描述

我现在有一个问题，我的网格在两侧留下了这个空白区域（用红色圈出）： 在此处输入图像描述

当我缩小屏幕尺寸并且网格重新格式化时，情况变得更糟： 在此处输入图像描述

我想要它，所以我的所有元素都跨越了我的容器的整个宽度并填满了这个空白空间，这样它就会与我的搜索栏一致。换句话说，我不希望我的网格两边都有这个额外的空间： 在此处输入图像描述

这是我的 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>

提前致谢

标签： csscss-grid

解决方案

你可以试试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>

推荐阅读