响应式正方形网格

Question

我想知道如何使用 响应式方块 创建布局。每个正方形都有 垂直和水平对齐的 内容。具体例子如下图…

原文由 garethdn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

新解决方案 (2022)

写完这个答案后，CSS 发生了变化。我们现在有几个属性可以大大简化方形网格的代码：

• 处理网格布局的 网格 属性（ MDN 参考）
• 处理每个网格项的方形纵横比的 纵横比 属性（ MDN 参考）
• object-fit 属性来处理图像居中以及它们是否应该覆盖正方形（ MDN 参考）

这是一个例子：

 .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 5%;
  background-color: #1E1E1E;
  color: #fff;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

 <div class="grid">
  <div class="square">
    <ul>This demo shows you can center multiple types of content :
      <li>Text</li>
      <li>Images</li>
      <li>Lists</li>
      <li>... (you can also do it with forms)</li>
    </ul>
  </div>
  <div class="square">98%</div>
  <div class="square">3.9/5</div>
  <div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
  <div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>

---

---

上一个答案

这仍然有效，但 CSS 自编写以来已经发生了变化，并且 ne 属性可以使代码更简单、更容易理解。

您可以仅使用 CSS 制作具有垂直和水平 居中内容 的响应式正方形网格。我将逐步解释如何实现，但首先这里有 2 个演示，说明您可以实现的目标：

• 正方形图像网格
• 包含内容的正方形网格

现在让我们看看如何制作这些精美的响应式方块！

---

1.制作响应式方块：

保持元素方形（或任何其他纵横比）的技巧是使用百分比 padding-bottom 。

旁注：您也可以使用顶部填充或顶部/底部边距，但不会显示元素的背景。

由于 top padding 是根据 父元素 的宽度计算的（ 参见 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.在方块内添加内容：

由于您不能直接在正方形内添加内容（它会扩展它们的高度并且正方形不再是正方形）您需要在其中创建子元素（对于这个例子我使用的是 div） position: absolute; 并将内容放入其中。这会将内容从流中取出并保持正方形的大小。

不要忘记 在父级 div 上添加 position:relative; 以便绝对子级相对于其父级定位/调整大小。

让我们向我们的 3x3 正方形网格添加一些内容：

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. 内容居中：

横向：

这很简单，你只需要添加 text-align:center 到 .content 。

结果

垂直对齐 ：

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

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

but we can’t use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content div。我们的代码将更新如下：

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

---

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

实时全屏结果

可编辑的小提琴在这里

---

原文由 web-tiki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 vw（view-width）单位，这将使方块根据屏幕的宽度做出响应。

一个快速的模型是：

 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>

原文由 jbutler483 发布，翻译遵循 CC BY-SA 3.0 许可协议