对齐网格中的项目

Question

如何将项目放在网格中，其中项目将接触容器边界，并且每个项目之间有特定的间隙？

https://i.imgur.com/zO1dQmr.png

对我来说这是一个微不足道但很重要的问题。我做了研究，有一些方法（我不喜欢它们中的任何一个，想找到更好的解决方案）

1.引导方法

演示：https://codepen.io/olegburakov/pen/MQORVX

.container{
  overflow: hidden; 

  &__inner{
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;  
  }

  &__item{
    padding: 10px;
    width: 100%;
    min-height: 100px;

    @media screen and (min-width: 480px){
      width: 50%;
    }
    @media screen and (min-width: 768px){
    width: 33.33%;
    }
    @media screen and (min-width: 1024px){
      width: 25%;
    }


    &-inner{
      background: olive;
      height: 100%;
    }
  }
}

我不喜欢这个解决方案，因为：

1) 容器中的负边距将项目压到它的边界并使项目接触它。

2）需要在容器中添加包装器溢出：隐藏以隐藏水平滚动条或padding-left和padding-right等于或大于容器的负边距。

3) HTML 中的附加块：container-wrapper 和 item-inner

2。 Nth-child 方法

比引导方法更难，对媒体查询不利。

3.网格布局方法

演示：https://codepen.io/olegburakov/pen/xYPeoK

.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;

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

  &__item{
    width: 100%;
    min-height: 100px;
    background: olive;
  }
}

我的最爱。只需 4 行代码！但我不确定它的兼容性（例如在我未更新的 Edge15 演示中看起来像这样https://i.imgur.com/p8shL04.png）。我认为我们需要一些时间才能完全使用网格布局。

4.流体宽度法

演示：https://codepen.io/olegburakov/pen/jYWyeW

我编写了一个计算项目宽度的 mixin。所以你不需要额外的 HTML 或 padding/margin 属性。但是，当最后一行的项目多于一个项目且少于整行时，它不起作用。我尝试使用 :before :after 解决此问题，但没有成功。

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: tomato;

  &__item{
    @include fluid-width-item(100%, 15px, 15px);
    border: 1px solid #000;
    min-height: 100px;
    background-color: olive;
  }

  &__item{
    @media screen and (min-width: 480px){
      @include fluid-width-item(50%, 15px, 15px);
    }
    @media screen and (min-width: 768px){
      @include fluid-width-item(33.33%, 15px, 15px);
    }
    @media screen and (min-width: 1024px){
      @include fluid-width-item(20%, 15px, 5px);
    }
  }
}

所以也许我错过了没有额外 html/css 和良好兼容性的更有趣的方法？目前我使用引导方法。

Answer 1

对于网格布局方法和兼容性问题，我真的很喜欢Morten Rand-Hendriksen的方法，如果你先让你的网站移动：

强制网站在所有浏览器中看起来都一样只是一个坏习惯。

[...]

可访问的移动优先布局适用于所有屏幕宽度。

https://www.youtube.com/embed/txZq7Laz7_4?start=1313&end=1587

---

此处为您的代码一次：（用于 sn-p 纯 CSS 和无 SASS）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.container__item {
  min-height: 100px;
  margin: 0 20px 20px 20px;
  background: olive;
}

@supports (grid-area: auto) {

  @media screen and (min-width: 480px) {
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
      margin: 0;
    }
  
    .container__item {
      margin: 0;
    }
  }

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

  @media screen and (min-width: 1024px) {
    .container {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

}

<div class="container">
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
  <div class="container__item"></div>
</div>

---

也许这也是适合您的一种方法。 :)