CSS-网格行居中

Question

我得到了一个由内联块元素制成的网格，这样它们可以溢出到其他行。

问题是，如果该行不完整，则该行中的项目也会居中并且不与左侧对齐，就像它们只是溢出一样。

这个小提琴可以看出问题所在。

在纯CSS中有什么方法可以做到这一点？ 使容器居中，但其中的元素仍然在左侧？

我已经尝试使用margin: 0 auto; 只能使容器居中，但容器必须具有固定的宽度，但是在这种情况下，容器会尽可能扩展（填充外部容器）。

编辑：我能想到的唯一方法是使用Javascript获取容器的宽度，然后将宽度除以元素的宽度（因为它们具有相同的宽度），将宽度应用于容器并加上边距： 0自动； 方法。

Answer 1

在一般情况下，这是不可行的（ 请参阅本文 ），因为CSS无法确定元素何时包装，因此无法重新计算所需的空白空间。

类似于该帖子中的解决方案，您可以使用媒体查询来获得此结果。 我已经针对您的情况写了一个更具体的版本：

 .grid { margin: 0 auto; width: 990px; font-size: 0; } .item { display: inline-block; margin: 5px; width: 100px; height: 100px; background: red; } @media screen and (max-width: 230px) { .grid { width: 110px; } } @media screen and (min-width: 231px) and (max-width: 340px) { .grid { width: 220px; } } @media screen and (min-width: 341px) and (max-width: 450px) { .grid { width: 330px; } } @media screen and (min-width: 451px) and (max-width: 560px) { .grid { width: 440px; } } @media screen and (min-width: 561px) and (max-width: 670px) { .grid { width: 550px; } } @media screen and (min-width: 671px) and (max-width: 780px) { .grid { width: 660px; } } @media screen and (min-width: 781px) and (max-width: 890px) { .grid { width: 770px; } } @media screen and (min-width: 891px) and (max-width: 1000px) { .grid { width: 880px; } } @media screen and (min-width: 1001px) and (max-width: 1110px) { .grid { width: 990px; } } 

 <div class="grid"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

但是，不建议编写这么多媒体查询。 我实际上是使用Sass生成它们的（请参阅我的CodePen ）：

$width: 100px;
$margin: 5px;
$extra-padding: 10px;
$column-width: $width + 2 * $margin;
$num-blocks: 9;

@function screen-size($n) {
  @return $n * $column-width + $extra-padding;
}

.grid {
  margin: 0 auto;
  width: $num-blocks * $column-width;
  font-size: 0;
}

.item {
  display: inline-block;
  margin: $margin;
  width: $width;
  height: 100px;
  background: red;
}

@media screen and (max-width: screen-size(2)) {
  .grid {
    width: $column-width;
  }
}

@for $i from 2 through $num-blocks {
  @media screen and (min-width: screen-size($i) + 1px) and (max-width: screen-size($i + 1)) {
    .grid {
      width: $i * $column-width;
    }
  }
}

上面的解决方案有其局限性，它只能与固定数量的块一起使用。 如果这是一个问题，您将必须使用JavaScript库（例如Desandro Masonry）或自行滚动。

Answer 2

似乎不可能仅使用CSS方法进行此操作（除非使用Flexbox）。

这意味着我将使用“使用Javascript设置宽度并使用margin：0 auto”方法。

最好的方法是使用@Nelson Yeung提出的仅CSS方法，但是我将在多个页面上使用它，其中容器宽度将是不同的。

同样有趣的是，面向前端开发人员<>设计师的平台Zeplin也正在使用我将要使用的方法。