响应方块网格

小编典典

响应方块网格

all

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

带有内容的响应方块

阅读 69

2022-08-03

共1个答案

小编典典

新解决方案 (2022)

自从写了这篇文章以来，CSS 已经发生了变化。我们现在有几个属性可以大大简化方形网格的代码：

处理网格布局的 网格属性（ MDN 参考）
处理每个网格项的正方形纵横比的纵横 比属性（ MDN 参考）
处理图像居中的 对象拟合 属性以及它们是否应该覆盖正方形（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.制作响应方块：

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

由于顶部填充是根据 父元素 的宽度计算的（参见 MDN 参考），因此元素的高度将根据其宽度而变化。您现在可以根据其宽度
保持其纵横比。
此时您可以编写代码：

HTML ：

<div></div>

CSS ：

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

这是使用上述代码的 33 正方形网格的 简单布局示例。*

使用这种技术，您可以制作任何其他纵横比，这是一个根据纵横比和 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;并将内容放入其中. 这会将内容从流中取出并保持正方形的大小。

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

让我们在 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;

但是我们不能使用display:table;on.square或.contentdivs，因为它与 div
冲突，position:absolute;所以我们需要在.contentdiv 中创建两个子级。我们的代码将更新如下：

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

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

实时全屏结果

可编辑的jsfiddle在这里

2022-08-03