Question

我正在整理我的投资组合网站，但是遇到了问题。我使用了自动调整功能，因为我希望它具有响应性，并且我会每月继续在其中添加新图像。

我发现我无法按照自己想要的方式居中，因为网格正在用我现在不需要的其他列填充空白空间，因此网格正在亲吻网站的左侧。请帮助大家，你是最好的！：）

<section class="projects">
    <h2 class="h2">Projects</h2>

    <div class="projects__part">
        <h4 class="h4">Primary projects</h4>
        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>
    </div>

    <div class="projects__part">
        <h4 class="h4">Secondary projects</h4>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>
    </div>
</section>



.projects {
&__part {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));


  /*DESIRED RESPONSIVE EFFECT:
  h4 {
    margin-left: 22rem;
  }
  margin-left: 35rem;
*/  
}


&-item {

    &__img {
        width: 14rem;
        height: 14rem;
        border-radius: 100%/100%;
    }
}


h4 {
    grid-column: 1 / -1;
}

}

这是我的代码：https://codepen.io/maja5252/pen/XPPaBL?editors=1100#0

如果此帖子的格式不正确，请再次抱歉。仍然不知道如何将我的代码拆分为HTML和CSS部分：）

Answer 1

您的代码有几个问题：

-CSS网格喜欢控制其列的大小，并且图像上的高度/宽度固定。如果对代码进行DevTools检查，您将看到第3列正从网格溢出。我将高度/宽度更改为100%/100%。如果需要方形图像，请在Photoshop中而不是CSS中解决该问题。

-使整个网格居中非常简单，您只需添加margin: 0 auto，因为它是一个块级元素。但是，块级元素占用100％的视口宽度，因此居中100％宽度的元素不会产生任何可见效果。我将宽度设置为80％，以展示它看起来如何居中，但是您可以使用任何非100％的值来实现此效果。

-我也不确定您对网格中的auto-fit所做的事情。只需使用1fr，它就可以很好地工作并且代码很干净。

-我也使整个网格对您都具有响应能力-不确定您是否想这样做，但最好也进行展示。

所有已更正的CSS问题一起出现：

.projects {
  margin: 0 25px;

  @media (min-width: 450px) {
    width: 80%;
    margin: 0 auto; 
  }

  &__part {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: 1fr;

    @media (min-width: 450px) and (max-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  &-item {
    &__img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  h4 {
    grid-column: 1 / -1;
  }
}

演示： https://codepen.io/staypuftman/pen/qMMPwp

Answer 2

我发现，我的H4标题正在干扰自动调整效果，因此它的作用类似于自动填充效果。代码已被编辑-我将标题从网格中拉出，并且居中。

致@staypuftman-感谢您的建议-我在以后的工作中会牢记这些。现在，当自动调整有效时，您可以看到它的响应速度，而无需任何媒体查询。再次感谢您为我提供的帮助。

如何居中包含重复的网格（自动拟合，最小最大值（15rem，1fr））；

2 个答案: