小编典典

响应方块网格

all

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

带有内容的响应方块


阅读 71

收藏
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
个演示,说明您可以实现的目标:
* __

响应式 3x3
方形网格
3x3
网格中的响应式方形图像

现在让我们看看如何制作这些花哨的响应方块!


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