响应方块网格

Question

我想知道如何使用响应方块创建布局。每个方块都有垂直和水平对齐内容。具体示例如下所示......

Answer 1

您只能使用 CSS ，使用verticaly和horizo​​ntaly 居中内容制作响应方块网格。我将在一步一步的过程中解释如何，但首先是你可以实现的2个演示：

• Grid of square images
• Grid of squares with content

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

---

1。制作响应方块：

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

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

HTML ：

 <div></div>

CSS

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

以下是使用上述代码的 simple layout example 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。在正方形内添加内容

由于你无法直接在正方形内添加内容（它会扩展它们的高度，正方形不再是正方形）你需要在{{1}内创建子元素（对于这个例子，我是usind div）并将内容放在其中。这将把内容从流中取出并保持正方形的大小。

不要忘记在父div上添加position:abolute;，以便绝对子项的位置/大小相对于其父级。

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

HTML ：

position:relative;

CSS ：

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

RESULT ＆lt; - 通过一些格式化，让它变得漂亮！

---

3.中心内容

Horizo​​ntaly：

这很简单，您只需要将.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%; } 添加到text-align:center 的 RESULT

垂直对齐

这变得严重！诀窍是使用

.content

但我们无法在display:table; /* and */ display:table-cell; vertical-align:middle; 或display:table; div上使用.square因为它与.content冲突，所以我们需要创建两个孩子在position:absolute; div内。我们的代码将更新如下：

HTML ：

.content

CSS：

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

---

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

LIVE FULLSCREEN RESULT

editable fiddle here

---

Answer 2

你可以使用vw（视宽）单位，这会使方块根据屏幕的宽度做出响应。

快速模拟这将是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

接受的答案很棒，但可以使用flexbox完成。

这是一个用BEM syntax编写的网格系统，允许每行显示1-10列。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴：https://jsfiddle.net/patrickberkeley/noLm1r45/3/

这是在FF和Chrome中测试的。

Answer 4

我已经编写了一个名为 simpleGrid 的库，它就是这样做的，而且很酷的是，它可以处理任何数量的项目而不会出现性能问题。它会自动调整每行的项目数量。

如果您希望每个项目都具有特定的宽高比，那么您需要使用trick，这非常简单。

Answer 5

现在我们可以使用 aspect-ratio ^ref 属性轻松做到这一点

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}

<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

也像下面一样，我们可以有可变数量的列

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}

<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>