时间戳

首页 > 解决方案 > 如何使包含重复的网格居中（自动调整，最小最大（15rem，1fr））；

html - 如何使包含重复的网格居中（自动调整，最小最大（15rem，1fr））；

问题描述

我正在整理我的作品集网站，但遇到了一个问题。我使用了自动调整功能，因为我希望它具有响应性，并且我每个月都会继续在那里添加新图像。

我发现我无法以我想要的方式居中，因为网格正在用我现在不需要的其他列填充空白空间，所以我的网格正在亲吻我的网站的左侧。请帮助小伙伴们，你们是最棒的！:)

<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 部分:)

标签： htmlsass

解决方案

您的代码有几个问题：

-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

推荐阅读