blocks|key|170254|text|您可以使响应式网格的正方形与垂直和水平居中的内容只有CSS。我将一步一步地解释如何实现，但首先是您可以实现的两个演示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|170255|170256|Grid+of+square+images|unordered-list-item|170257|Grid+of+squares+with+content|170258|170259|​|170260|📷|atomic|170261|170262|170263|现在让我们看看如何制作这些奇特的响应式方块！|170264|170265|170266|1.制作响应式方块：|170267|保持元素正方形(或任何其他纵横比)的诀窍是使用百分比padding-bottom。|CODE|170268|附注:您也可以使用顶部填充或上/下边距，但元素的背景不会显示。|170269|由于顶部填充是根据parent+element+(See+MDN+for+reference)的宽度计算的，因此元素的高度将根据其宽度而变化。你现在可以根据它的宽度保持它的宽高比。|170270|此时，您可以编写代码：|170271|HTML：|170272|<div></div>|code-block|syntax|javascript|170273|CSS：|170274|div+{
++++width:+30%25;
++++padding-bottom:+30%25;+/*+=+width+for+a+square+aspect+ratio+*/
}|170275|这是一个使用上面代码的3*3正方形网格的。|170276|使用这种技术，你可以制作任何其他的宽高比，这是一个表格，给出了底部填充的值根据宽高比和30%25的宽度。|170277|+Aspect+ratio++%7C++padding-bottom++%7C++for+30%25+width
------------------------------------------------
++++1:1++++++++%7C++=+width+++++++++%7C++++30%25
++++1:2++++++++%7C++width+x+2+++++++%7C++++60%25
++++2:1++++++++%7C++width+x+0.5+++++%7C++++15%25
++++4:3++++++++%7C++width+x+0.75++++%7C++++22.5%25
++++16:9+++++++%7C++width+x+0.5625++%7C++++16.875%25|170278|170279|2.在正方形内添加内容：|170280|由于不能直接在正方形中添加内容(这会增加正方形的高度，而正方形将不再是正方形)，因此需要使用position:+absolute;在正方形中创建子元素(在本例中我使用div)，并将内容放入其中。这将去掉流中的内容，并保持正方形的大小。|170281|不要忘记在父div上添加了position:relative;，以便绝对子对象相对于其父对象定位/调整大小。|170282|让我们在我们的3x3正方形网格中添加一些内容：|170283|170284|<div+class="square">
++++<div+class="content">
++++++++..+CONTENT+HERE+..
++++</div>
</div>
...+and+so+on+9+times+for+9+squares+...|170285|170286|.square+{
++++float:+left;
++++position:+relative;
++++width:+30%25;
++++padding-bottom:+30%25;+/*+=+width+for+a+1:1+aspect+ratio+*/
++++margin:+1.66%25;
++++overflow:+hidden;
}

.content+{
++++position:+absolute;
++++height:+80%25;+/*+=+100%25+-+2*10%25+padding+*/
++++width:+90%25;+/*+=+100%25+-+2*5%25+padding+*/
++++padding:+10%25+5%25;
}|170287|+<--使用一些格式使它看起来更漂亮！|170288|170289|3.内容居中：|170290|Horizontally+:|170291|这非常简单，您只需要向.content添加text-align:center即可。|170292|170293|垂直对齐:|170294|这会变得很严重！诀窍是使用|170295|display:+table;
/*+and+*/
display:+table-cell;
vertical-align:+middle;|170296|，但是，我们不能在.square或.content+div上使用display:table;，因为它与position:absolute;冲突，所以我们需要在.content+div中创建两个子代。我们的代码将进行如下更新：|170297|170298|<div+class="square">
++++<div+class="content">
++++++++<div+class="table">
++++++++++++<div+class="table-cell">
++++++++++++++++...+CONTENT+HERE+...
++++++++++++</div>
++++++++</div>
++++</div>
</div>
...+and+so+on+9+times+for+9+squares+...|170299|170300|.square+{
++++float:left;
++++position:+relative;
++++width:+30%25;
++++padding-bottom+:+30%25;+/*+=+width+for+a+1:1+aspect+ratio+*/
++++margin:1.66%25;
++++overflow:hidden;
}

.content+{
++++position:absolute;
++++height:80%25;+/*+=+100%25+-+2*10%25+padding+*/
++++width:90%25;+/*+=+100%25+-+2*5%25+padding+*/
++++padding:+10%25+5%25;
}

.table{
++++display:table;
++++height:100%25;
++++width:100%25;
}

.table-cell{
++++display:table-cell;
++++vertical-align:middle;
++++height:100%25;
++++width:100%25;
}|170301|170302|我们现在已经完成了，我们可以在这里查看结果：|170303|LIVE+FULLSCREEN+RESULT|170304|editable+fiddle+here|170305|170306|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/webtiki/MpXYr/2/embedded/result/|1|http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/c67e1ff74a1c57d7cae8439cb4c72c6f.jpeg|imageAlt|3|https://ask.qcloudimg.com/http-save/yehe-900000/cd5af5fda16eaff64f2fc6223bb713f3.jpeg|4|https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom#Values|5|6|http://jsfiddle.net/webtiki/MpXYr/3/^0|4|9|J|5|0|0|0|L|0|0|0|S|1|0|0|0|0|1|2|0|0|1|3|0|0|0|0|0|0|Q|E|0|0|9|E|P|L|4|0|0|0|0|0|0|0|0|0|0|0|1A|J|0|0|4|D|I|0|0|0|0|0|0|0|0|0|0|E|0|B|8|L|H|0|0|0|5|0|0|0|0|3|9|7|H|8|W|E|1F|I|27|8|0|0|0|0|0|0|0|0|M|5|0|0|K|6|0|0^^$0|@$1|2|3|4|5|6|7|3N|8|@$9|3O|A|3P|B|C]|$9|3Q|A|3R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|3S|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|3T|8|@]|D|@$9|3U|A|3V|1|3W]]|E|$]]|$1|J|3|K|5|I|7|3X|8|@]|D|@$9|3Y|A|3Z|1|40]]|E|$]]|$1|L|3|-4|5|6|7|41|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|42|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|43|8|@]|D|@$9|44|A|45|1|46]]|E|$]]|$1|R|3|P|5|Q|7|47|8|@]|D|@$9|48|A|49|1|4A]]|E|$]]|$1|S|3|N|5|6|7|4B|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|4C|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|4D|8|@]|D|@]|E|$]]|$1|W|3|N|5|6|7|4E|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|4F|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|4G|8|@$9|4H|A|4I|B|11]]|D|@]|E|$]]|$1|12|3|13|5|6|7|4J|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|4K|8|@$9|4L|A|4M|B|C]]|D|@$9|4N|A|4O|1|4P]]|E|$]]|$1|16|3|17|5|6|7|4Q|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|4R|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|1C|7|4S|8|@]|D|@]|E|$1D|1E]]|$1|1F|3|1G|5|6|7|4T|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|1C|7|4U|8|@]|D|@]|E|$1D|1E]]|$1|1J|3|1K|5|6|7|4V|8|@]|D|@]|E|$]]|$1|1L|3|1M|5|6|7|4W|8|@]|D|@]|E|$]]|$1|1N|3|1O|5|1C|7|4X|8|@]|D|@]|E|$1D|1E]]|$1|1P|3|-4|5|6|7|4Y|8|@]|D|@]|E|$]]|$1|1Q|3|1R|5|6|7|4Z|8|@]|D|@]|E|$]]|$1|1S|3|1T|5|6|7|50|8|@$9|51|A|52|B|11]]|D|@]|E|$]]|$1|1U|3|1V|5|6|7|53|8|@$9|54|A|55|B|C]|$9|56|A|57|B|11]]|D|@]|E|$]]|$1|1W|3|1X|5|6|7|58|8|@]|D|@]|E|$]]|$1|1Y|3|19|5|6|7|59|8|@]|D|@]|E|$]]|$1|1Z|3|20|5|1C|7|5A|8|@]|D|@]|E|$1D|1E]]|$1|21|3|1G|5|6|7|5B|8|@]|D|@]|E|$]]|$1|22|3|23|5|1C|7|5C|8|@]|D|@]|E|$1D|1E]]|$1|24|3|25|5|6|7|5D|8|@]|D|@]|E|$]]|$1|26|3|-4|5|6|7|5E|8|@]|D|@]|E|$]]|$1|27|3|28|5|6|7|5F|8|@]|D|@]|E|$]]|$1|29|3|2A|5|6|7|5G|8|@$9|5H|A|5I|B|C]]|D|@]|E|$]]|$1|2B|3|2C|5|6|7|5J|8|@$9|5K|A|5L|B|11]|$9|5M|A|5N|B|11]]|D|@]|E|$]]|$1|2D|3|-4|5|6|7|5O|8|@]|D|@]|E|$]]|$1|2E|3|2F|5|6|7|5P|8|@$9|5Q|A|5R|B|C]]|D|@]|E|$]]|$1|2G|3|2H|5|6|7|5S|8|@]|D|@]|E|$]]|$1|2I|3|2J|5|1C|7|5T|8|@]|D|@]|E|$1D|1E]]|$1|2K|3|2L|5|6|7|5U|8|@$9|5V|A|5W|B|C]|$9|5X|A|5Y|B|11]|$9|5Z|A|60|B|11]|$9|61|A|62|B|11]|$9|63|A|64|B|11]|$9|65|A|66|B|11]]|D|@]|E|$]]|$1|2M|3|19|5|6|7|67|8|@]|D|@]|E|$]]|$1|2N|3|2O|5|1C|7|68|8|@]|D|@]|E|$1D|1E]]|$1|2P|3|1G|5|6|7|69|8|@]|D|@]|E|$]]|$1|2Q|3|2R|5|1C|7|6A|8|@]|D|@]|E|$1D|1E]]|$1|2S|3|-4|5|6|7|6B|8|@]|D|@]|E|$]]|$1|2T|3|2U|5|6|7|6C|8|@]|D|@]|E|$]]|$1|2V|3|2W|5|6|7|6D|8|@]|D|@$9|6E|A|6F|1|6G]]|E|$]]|$1|2X|3|2Y|5|6|7|6H|8|@]|D|@$9|6I|A|6J|1|6K]]|E|$]]|$1|2Z|3|-4|5|6|7|6L|8|@]|D|@]|E|$]]|$1|30|3|-4|5|6|7|6M|8|@]|D|@]|E|$]]]|31|$32|$5|33|34|35|E|$36|37]]|38|$5|33|34|35|E|$36|39]]|3A|$5|3B|34|3C|E|$3D|3E|3F|-4]]|3G|$5|3B|34|3C|E|$3D|3H|3F|-4]]|3I|$5|33|34|35|E|$36|3J]]|3K|$5|33|34|35|E|$36|39]]|3L|$5|33|34|35|E|$36|3M]]]]

<p>You can make <strong>responsive grid of squares</strong> with vertically and horizontally <strong>centered content</strong> only with <em>CSS</em>. I will explain how in a step by step process but first here are 2 demos of what you can achieve:</p>
<ul>
<li><a href="http://jsfiddle.net/webtiki/MpXYr/2/embedded/result/" rel="noreferrer">Grid of square images</a></li>
<li><a href="http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/" rel="noreferrer">Grid of squares with content</a></li>
</ul>
<p><a href="http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/" rel="noreferrer"><img src="https://i.stack.imgur.com/s0MqH.jpg" alt="Responsive 3x3 square grid" /></a>
<a href="http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/" rel="noreferrer"><img src="https://i.stack.imgur.com/xti9i.jpg" alt="Responsive square images in a 3x3 grid" /></a></p>
<p>Now let's see how to make these fancy responsive squares!</p>
<hr />
<br/>
<h2>1. Making the responsive squares :</h2>
<p>The trick for keeping elements square (or whatever other aspect ratio) is to use percent <code>padding-bottom</code>.<br/>
<em>Side note: you can use top padding too or top/bottom margin but the background of the element won't display.</em></p>
<p>As top padding is calculated according to the width of the <strong>parent element</strong> (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom#Values" rel="noreferrer">See MDN for reference</a>), the height of the element will change according to its width. You can now <strong>Keep its aspect ratio</strong> according to its width.<br/>
At this point you can code:</p>
<p><em>HTML</em> :</p>
<pre class="lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
</code></pre>
<p><em>CSS</em> :</p>
<pre class="lang-css prettyprint-override"><code>div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}
</code></pre>
<p>Here is a <strong><a href="http://jsfiddle.net/webtiki/MpXYr/4/" rel="noreferrer">simple layout example</a></strong> of 3*3 squares grid using the code above.</p>
<p>With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.</p>
<pre><code> Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
</code></pre>
<hr />
<h2>2. Adding content inside the squares :</h2>
<p>As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am using divs) inside them with <code>position: absolute;</code> and put the content inside them. This will take the content out of the flow and keep the size of the square.</p>
<p><strong>Don't forget</strong> to add <code>position:relative;</code> on the parent divs so the absolute children are positioned/sized relatively to their parent.</p>
<p>Let's add some content to our 3x3 grid of squares :</p>
<p><em>HTML</em> :</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;square&quot;&gt;
    &lt;div class=&quot;content&quot;&gt;
        .. CONTENT HERE ..
    &lt;/div&gt;
&lt;/div&gt;
... and so on 9 times for 9 squares ...
</code></pre>
<p><em>CSS</em> :</p>
<pre class="lang-css prettyprint-override"><code>.square {
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    overflow: hidden;
}

.content {
    position: absolute;
    height: 80%; /* = 100% - 2*10% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
</code></pre>
<p><strong><a href="http://jsfiddle.net/webtiki/MpXYr/5/" rel="noreferrer">RESULT</a></strong> &lt;-- with some formatting to make it pretty!</p>
<hr />
<h2>3. Centering the content :</h2>
<p><strong>Horizontally :</strong></p>
<p>This is pretty easy, you just need to add <code>text-align:center</code> to <code>.content</code>.<br/>
<strong><a href="http://jsfiddle.net/webtiki/MpXYr/6/" rel="noreferrer">RESULT</a></strong></p>
<p><strong>Vertical alignment :</strong></p>
<p>This becomes serious! The trick is to use</p>
<pre class="lang-css prettyprint-override"><code>display: table;
/* and */
display: table-cell;
vertical-align: middle;
</code></pre>
<p><strong>but</strong> we can't use <code>display:table;</code> on <code>.square</code> or <code>.content</code> divs because it conflicts with <code>position:absolute;</code> so we need to create two children inside <code>.content</code> divs. Our code will be updated as follow :</p>
<p><em>HTML</em> :</p>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;square&quot;&gt;
    &lt;div class=&quot;content&quot;&gt;
        &lt;div class=&quot;table&quot;&gt;
            &lt;div class=&quot;table-cell&quot;&gt;
                ... CONTENT HERE ...
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
... and so on 9 times for 9 squares ...
</code></pre>
<p><em>CSS</em> :</p>
<pre class="lang-css prettyprint-override"><code>.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}
</code></pre>
<hr />
<p>We have now finished and we can take a look at the result here :</p>
<h2><a href="http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/" rel="noreferrer">LIVE FULLSCREEN RESULT</a></h2>
<p><a href="http://jsfiddle.net/webtiki/MpXYr/3/" rel="noreferrer">editable fiddle here</a></p>
<hr />


blocks|key|168630|text|您可以使用vw+(视图宽度)单位，这将使正方形根据屏幕的宽度进行响应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168631|这方面的一个快速模型是：|168632|​|168633|html,
body+{
++margin:+0;
++padding:+0;
}
div+{
++height:+25vw;
++width:+25vw;
++background:+tomato;
++display:+inline-block;
++text-align:+center;
++line-height:+25vw;
++font-size:+20vw;
++margin-right:+-4px;
++position:+relative;
}
/*demo+only*/

div:before+{
++content:+"";
++position:+absolute;
++top:+0;
++left:+0;
++height:+inherit;
++width:+inherit;
++background:+rgba(200,+200,+200,+0.6);
++transition:+all+0.4s;
}
div:hover:before+{
++background:+rgba(200,+200,+200,+0);
}|code-block|syntax|javascript|168634|<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>|168635|168636|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You could use vw (view-width) units, which would make the squares responsive according to the width of the screen.</p>

<p>A quick mock-up of this would be:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;div&gt;4&lt;/div&gt;
&lt;div&gt;5&lt;/div&gt;
&lt;div&gt;6&lt;/div&gt;
&lt;div&gt;7&lt;/div&gt;
&lt;div&gt;8&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2766524|text|公认的答案是很好的，但是这可以用flexbox来完成。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2766525|这是一个用BEM+syntax编写的网格系统，它允许每行显示1-10列。|2766526|如果最后一行不完整(例如，您选择每行显示5个单元格，但有7个项目)，则尾随项目将水平居中。要控制尾部项的水平对齐方式，只需更改.square-grid类下的justify-content+property。|2766527|.square-grid+{
++display:+flex;
++flex-wrap:+wrap;
++justify-content:+center;
}

.square-grid__cell+{
++background-color:+rgba(0,+0,+0,+0.03);
++box-shadow:+0+0+0+1px+black;
++overflow:+hidden;
++position:+relative;
}

.square-grid__content+{
++left:+0;
++position:+absolute;
++top:+0;
}

.square-grid__cell:after+{
++content:+'';
++display:+block;
++padding-bottom:+100%25;
}

//+Sizes+–+Number+of+cells+per+row

.square-grid__cell--10+{
++flex-basis:+10%25;
}

.square-grid__cell--9+{
++flex-basis:+11.1111111%25;
}

.square-grid__cell--8+{
++flex-basis:+12.5%25;
}

.square-grid__cell--7+{
++flex-basis:+14.2857143%25;
}

.square-grid__cell--6+{
++flex-basis:+16.6666667%25;
}

.square-grid__cell--5+{
++flex-basis:+20%25;
}

.square-grid__cell--4+{
++flex-basis:+25%25;
}

.square-grid__cell--3+{
++flex-basis:+33.333%25;
}

.square-grid__cell--2+{
++flex-basis:+50%25;
}

.square-grid__cell--1+{
++flex-basis:+100%25;
}|code-block|syntax|javascript|2766528|​|2766529|.square-grid+{
++display:+flex;
++flex-wrap:+wrap;
++justify-content:+center;
}

.square-grid__cell+{
++background-color:+rgba(0,+0,+0,+0.03);
++box-shadow:+0+0+0+1px+black;
++overflow:+hidden;
++position:+relative;
}

.square-grid__content+{
++left:+0;
++position:+absolute;
++top:+0;
}

.square-grid__cell:after+{
++content:+'';
++display:+block;
++padding-bottom:+100%25;
}

//+Sizes+–+Number+of+cells+per+row

.square-grid__cell--10+{
++flex-basis:+10%25;
}

.square-grid__cell--9+{
++flex-basis:+11.1111111%25;
}

.square-grid__cell--8+{
++flex-basis:+12.5%25;
}

.square-grid__cell--7+{
++flex-basis:+14.2857143%25;
}

.square-grid__cell--6+{
++flex-basis:+16.6666667%25;
}

.square-grid__cell--5+{
++flex-basis:+20%25;
}

.square-grid__cell--4+{
++flex-basis:+25%25;
}

.square-grid__cell--3+{
++flex-basis:+33.333%25;
}

.square-grid__cell--2+{
++flex-basis:+50%25;
}

.square-grid__cell--1+{
++flex-basis:+100%25;
}|2766530|<div+class='square-grid'>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
++<div+class='square-grid__cell+square-grid__cell--7'>
++++<div+class='square-grid__content'>
++++++Some+content
++++</div>
++</div>
</div>|2766531|2766532|小提琴：https://jsfiddle.net/patrickberkeley/noLm1r45/3/|2766533|这是在FF和Chrome中测试的。|2766534|entityMap|0|LINK|mutability|MUTABLE|url|https://en.bem.info/|1|https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Values|2|https://jsfiddle.net/patrickberkeley/noLm1r45/3/^0|G|7|0|5|A|0|0|1R|C|26|F|26|O|1|0|0|0|0|0|0|4|1C|2|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|H|3|I|5|6|7|1I|8|@$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|J|3|K|5|L|7|1Q|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1R|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1S|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|L|7|1T|8|@]|D|@]|E|$M|N]]|$1|U|3|P|5|6|7|1U|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|X|3|Y|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|20|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]|17|$5|12|13|14|E|$15|18]]|19|$5|12|13|14|E|$15|1A]]]]

<p>The accepted answer is great, however this can be done with <code>flexbox</code>.</p>

<p>Here's a grid system written with <a href="https://en.bem.info/" rel="noreferrer">BEM syntax</a> that allows for 1-10 columns to be displayed per row.</p>

<p>If there the last row is incomplete (for example you choose to show 5 cells per row and there are 7 items), the trailing items will be centered horizontally. To control the horizontal alignment of the trailing items, simply change the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Values" rel="noreferrer"><code>justify-content</code> property</a> under the <code>.square-grid</code> class.</p>

<pre class="lang-css prettyprint-override"><code>.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}
</code></pre>



<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='square-grid'&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='square-grid__cell square-grid__cell--7'&gt;
    &lt;div class='square-grid__content'&gt;
      Some content
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Fiddle: <a href="https://jsfiddle.net/patrickberkeley/noLm1r45/3/" rel="noreferrer">https://jsfiddle.net/patrickberkeley/noLm1r45/3/</a></p>

<p>This is tested in FF and Chrome.</p>


blocks|key|2766541|text|我将此解决方案用于不同配给的响应箱：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2766542|HTML：|2766543|<div+class="box+ratio1_1">
++<div+class="box-content">
++++++++++++...+CONTENT+HERE+...
++</div>
</div>|code-block|syntax|javascript|2766544|CSS：|2766545|.box-content+{
++width:+100%25;+height:+100%25;
++top:+0;right:+0;bottom:+0;left:+0;
++position:+absolute;
}
.box+{
++position:+relative;
++width:+100%25;
}
.box::before+{
++++content:+"";
++++display:+block;
++++padding-top:+100%25;+/*square+for+no+ratio*/
}
.ratio1_1::before+{+padding-top:+100%25;+}
.ratio1_2::before+{+padding-top:+200%25;+}
.ratio2_1::before+{+padding-top:+50%25;+}
.ratio4_3::before+{+padding-top:+75%25;+}
.ratio16_9::before+{+padding-top:+56.25%25;+}|2766546|查看JSfiddle.net上的演示|offset|length|2766547|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/mitjajez/g891pd2a/^0|0|0|0|0|0|2|C|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I use this solution for responsive boxes of different rations:</p>

<p>HTML:</p>

<pre><code>&lt;div class="box ratio1_1"&gt;
  &lt;div class="box-content"&gt;
            ... CONTENT HERE ...
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }
</code></pre>

<p>See demo on <a href="https://jsfiddle.net/mitjajez/g891pd2a/" rel="nofollow noreferrer">JSfiddle.net</a></p>


<p>I'm wondering how I would go about creating a layout with <strong>responsive squares</strong>. Each square would have <strong>vertically and horizontally aligned</strong> content. The specific example is displayed below...</p>

<p><img src="https://i.stack.imgur.com/k3cLG.png" alt="responsive squares with content"></p>


Grid of responsive squares

我想知道如何使用responsive 创建布局。每个正方形将具有垂直和水平对齐的内容。具体的例子如下所示。​​

问响应式方格网格
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式方格网格EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式方格网格
EN