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也正在使用我將要使用的方法。