响应式地将正方形网格居中

Question

我不太确定如何解释这个问题，因为我对编码还是比较陌生。

我目前在桌面上 'inline' 有一行 7 个方形 div。然而，随着屏幕的变化，我希望这些 div 通过浮动下降，但让行本身保持居中。

例如。

会发生什么（如果&=屏幕边缘，并且#=空白space）=

桌面视图
/2/3/4/5/6/7/#&

缩小视图
&# 1/2/3/4 #####&
&# 5/6/7 #######&

我希望发生的事情：

缩小视图
###1/2/3/4##&
&####5/6/7####&

https://jsfiddle.net/48942Lor/ - 完整代码。

CSS

#grid-container {width:40%;text-align:center;margin:0 auto;}

.grid-image {
    display: inline-block;
    box-sizing: border-box;
    min-height: 200px;
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    float: left;
    margin: 0 auto;
}

HTML

<section id="grid-container">
<div class="grid-image" id="red"></div>
<div class="grid-image" id="orange"></div>
<div class="grid-image" id="yellow"></div>
<div class="grid-image" id="green"></div>
<div class="grid-image" id="blue"></div>
<div class="grid-image" id="indigo"></div>
<div class="grid-image" id="violet"></div>
</section>

Answer 1

这是因为 float:left。删除它效果很好。这是 fiddle.

Answer 2

通过删除 .grid-image 下的 CSS 即 float:left;，它会将所有内容居中对齐。已更新 fiddle https://jsfiddle.net/48942Lor/3/

Answer 3

Flexbox 可以做到这一点。

/*Color Settings - DO NOT TOUCH OR ADD CODE */

#red {
  background-color: red
}
#orange {
  background-color: orange
}
#yellow {
  background-color: yellow
}
#green {
  background-color: green
}
#blue {
  background-color: blue
}
#indigo {
  background-color: indigo
}
#violet {
  background-color: violet
}
/*End of Color Settings - DO NOT TOUCH OR ADD CODE */

/*Outer Container Settings */

#grid-container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*End of Outer Container Settings */

.grid-image {
  box-sizing: border-box;
  min-height: 200px;
  min-width: 200px;
  max-width: 200px;
}

<section id="grid-container">
  <div class="grid-image" id="red"></div>
  <div class="grid-image" id="orange"></div>
  <div class="grid-image" id="yellow"></div>
  <div class="grid-image" id="green"></div>
  <div class="grid-image" id="blue"></div>
  <div class="grid-image" id="indigo"></div>
  <div class="grid-image" id="violet"></div>
</section>

JSFiddle Demo

Answer 4

简单，删除

float:left;

来自 .grid-image

响应式地将正方形网格居中

Responsively center a grid of squares

html

css

grid

center