对齐网格中的项目

Question

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

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

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

1. Bootstrap方法

演示：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。第 N 个子方法

比bootstrap方法更难，而且不利于媒体查询。

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 且具有良好兼容性的更有趣的方法？目前我使用 bootstrap 方法。

Answer 1

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

Forcing sites to look the same across all browsers is just a bad habit.

[...]

Accessible mobile-first layouts work well on all screen widths.

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

这里是您的代码：（对于纯 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>

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

对齐网格中的项目

Align items in a grid

html

css

layout

sass

css-grid