响应式方块网格

Question

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

responsive squares with content

Answer 1

自从这个问题写完以来，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>
    </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 自编写以来已经发生了变化，新的属性可以使代码更简单、更容易理解。

您可以仅使用

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% 宽度的底部填充值。

2.在方块内添加内容：

由于您无法直接在方块内添加内容（这会扩展它们的高度，方块将不再是方块），您需要使用

position: absolute;

在其中创建子元素（在本例中我使用的是 div）并放置其中的内容。这会将内容从流程中取出并保持正方形的大小。

不要忘记

在父级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%; }

结果 <-- with some formatting to make it pretty!

3.内容居中：

水平：

这很简单，您只需将

text-align:center

添加到

.content

即可。

结果

垂直对齐：

事情变得严重了！诀窍是使用

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

但是

我们不能在display:table;或

.square

div上使用

.content

，因为它与

position:absolute;

冲突，所以我们需要在

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

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

实时全屏结果

这里可编辑小提琴

Answer 2

这个的快速模型是：

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 列。如果最后一行不完整（例如您选择每行显示 5 个单元格且有 7 个项目），则尾随项目将水平居中。要控制尾随项目的水平对齐方式，只需更改

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>

小提琴：

https://jsfiddle.net/patrickberkeley/noLm1r45/3/

这是在 FF 和 Chrome 中测试的。

Answer 4

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>

Answer 5

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

上的演示

Answer 6

Tailwind

解决方案： <div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <div class="aspect-[1/1] flex items-center"> <div class="w-full h-full bg-blue-500"></div> </div> <div class="aspect-[1/1] flex items-center"> <div class="w-full h-full bg-red-500"></div> </div> <div class="aspect-[1/1] flex items-center"> <div class="w-full h-full bg-green-500"></div> </div> <div class="aspect-[1/1] flex items-center"> <div class="w-full h-full bg-yellow-500"></div> </div> </div>

这会呈现一个由四个正方形组成的网格，行和列为两行，但在较小的设备上呈现为四行的单列。

响应式方块网格

问题描述投票：0回答：6

6个回答

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

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

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

由于您无法直接在方块内添加内容（这会扩展它们的高度，方块将不再是方块），您需要使用

最新问题

响应式方块网格

问题描述 投票：0回答：6

6个回答

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

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

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

由于您无法直接在方块内添加内容（这会扩展它们的高度，方块将不再是方块），您需要使用

最新问题

问题描述投票：0回答：6