响应正方形的网格

我想知道如何去创build一个响应方块的布局。 每个广场将有垂直和水平alignment的内容。 具体示例如下所示…

Answer 1

你可以用CSS和垂直和水平为中心的内容做响应的网格 。 我将解释如何在一步一步的过程，但首先在这里是你可以实现的2个演示：

• 方形图像的网格
• 与内容的正方形网格

现在让我们来看看如何使这些奇特的响应方块！

---

1.制作响应方块：

保持元素正方形（或其他宽高比）的技巧是使用百分比padding-bottom 。
附注：您也可以使用顶部填充或顶部/底部边距，但不会显示元素的背景。

由于顶部填充根据父元素的宽度进行计算（ 请参阅MDN以供参考 ），元素的高度将根据其宽度而改变。 您现在可以根据其宽度保持其宽高比 。
在这一点上你可以编码：

HTML ：

  <div></div> 

CSS

 div { width: 30%; padding-bottom: 30%; /* = width for a square aspect ratio */ } 

这是一个使用上面代码的3 * 3方格网格的简单布局示例 。

使用这种技术，您可以制作任何其他宽高比，下面是一个根据长宽比和30％宽度给出底部填充值的表格。

  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% 

---

2.在广场内添加内容

因为你不能直接在方块内添加内容（它会扩大它们的高度，而且方块不再是方块），所以你需要在内部创build子元素（这个例子中我是使用div的） position:abolute; 并把它们放在里面 这将把stream出的内容和保持广场的大小。

不要忘记添加position:relative; 在父母的divs，所以绝对的孩子相对于他们的父母的位置/大小。

让我们添加一些内容到我们的3×3方格：

HTML ：

 <div class="square"> <div class="content"> .. CONTENT HERE .. </div> </div> ... and so on 9 times for 9 squares ... 

CSS ：

 .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%; } 

结果 < – 用一些格式来使它漂亮！

---

3.以内容为中心

Horizo​​ntaly：

这很容易，你只需要添加text-align:center到。内容。
结果

垂直alignment

这变得严重！ 诀窍就是使用

 display:table; /* and */ display:table-cell; vertical-align:middle; 

但是我们不能使用display:table; .square或.content divs，因为它与position:absolute;冲突position:absolute; 所以我们需要在.content div里面创build两个孩子。 我们的代码将更新如下：

HTML ：

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

CSS：

 .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%; } 

---

我们现在已经完成了，我们可以在这里看看结果：

现场FULLSCREEN结果

可编辑的小提琴在这里

---

Answer 2

您可以使用vw（视图宽度）单位，这将使广场响应根据屏幕的宽度。

这个快速的模拟将是：

 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); } 

 <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> 

Answer 3

接受的答案是伟大的，但是这可以用flexbox来完成。

这是一个用BEM语法编写的网格系统，每行可以显示1-10列。

如果最后一行不完整（例如，您select每行显示5个单元格并且有7个项目），则尾部项目将水平居中。 要控制尾随项目的水平alignment，只需更改.square-grid类下的justify-content属性 .square-grid 。

 .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%; } 

 .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%; } 

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

Answer 4

我编写了一个名为simpleGrid的库，它可以做到这一点，而且它很酷，它可以处理任何数量的项目，而不会造成性能问题。 它会自动调整每行的项目数量。

如果你想要每个项目有一个特定的长宽比，那么你需要使用一个技巧 ，这是非常简单的。

Answer 5

我使用这个解决scheme的不同口粮的响应盒：

HTML：

 <div class="box ratio1_1"> <div class="box-content"> ... CONTENT HERE ... </div> </div> 

CSS：

 .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%; } 

在JSfiddle.net上查看演示