Question

如何将物品放入网格中，其中物品将接触容器边框，并且每个物品之间有特定的间隙？

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

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

1。引导方法

DEMO：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）需要将包装器添加到带溢出的容器：隐藏以隐藏水平滚动条或填充左侧和填充右侧等于或大于容器的负边距。

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

2。 Nth-child方法

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

第3。网格布局方法

DEMO：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。流体宽度方法

DEMO：https://codepen.io/olegburakov/pen/jYWyeW

我写了一个计算项目宽度的mixin。因此，您不需要额外的HTML或填充/边距属性。但是当最后一行有多个项目而不是完整行时，它不起作用。我尝试用以下方法解决这个问题：之前：之后但是没有用。

.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 的方法，如果您先将网站设为移动设备：

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

[...]

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

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

这里有一次你的代码：（对于片段纯CSS而且没有SASS）

＆＃13;

* {
  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;
    }
  }

}

＆＃13;

<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>

＆＃13;

也许这对你来说也是一种方法。：）

对齐网格中的项目

1 个答案: