正方形中的徽标网格

让我们构建一个真正的正方形网格，并在每个正方形内居中放置一些杂志的徽标。我想你们中的许多人以前都必须构建过徽标网格。您可能已经可以想象它：网站的一个区域列出了捐助者、赞助商，或者展示了使用某些产品的那些大型知名公司。将徽标放入正方形是一种不错的处理方式，因为它迫使所有不同大小、纵横比和视觉权重的徽标之间保持干净的结构，这可能会变得很麻烦，看起来很凌乱。

我所说的“网格”是指 CSS 网格。建立一个（灵活的）正方形网格本身就是一个技巧。然后，我们将以一种保持其大小和居中的方式将这些徽标放置在那里。最后，我们将看看一个小小的奇点。

1) 网格标记

您是否曾在支持 Emmet 的编辑器中尝试过此操作？

.grid>div*5>img

然后按tab键。它将扩展为

<div class="grid">
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

只是一个快速工作的小技巧。

2) CSS 网格基础

我们将使用臭名昭著的灵活列技术

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

这将不仅为我们提供灵活的列，还提供灵活的列数。请记住，我们并不真正关心有多少列——我们只是在构建一个徽标网格来显示。

如果我们给每个网格项目 div 设置一个背景和一个强制高度，我们会看到类似以下内容

2) 制作真正的正方形

与其强制网格项目具有特定高度，不如使用纵横比技巧。我们将用padding-bottom: 100%;放置一个空的伪元素，这意味着它将强制高度至少与宽度一样高。

.grid > div {
  background: black;
  padding: 1rem;
}

.grid > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

如果我们暂时隐藏图像，您将看到矩形网格已变为完美的正方形网格

3) 使图像重叠

但是在图像位于其中时，它们会变得有点长方形，因为图像位于伪元素中。

我们需要一种将它们彼此叠加的方法。通常，使用纵横比技术，我们会使用绝对定位来放置内部子容器，以覆盖现在具有纵横比的形状。但是，由于我们已经使用了网格，所以让我们再次使用网格将项目放置在同一空间中

.grid > div {
  /* ... */
  display: grid;
}
.grid > div::before,
.grid > div > img {
  grid-area: 1 / 1 / 2 / 2;
}

这意味着将主网格的网格项目也变成网格容器，没有明确的行和列，然后将伪元素和图像都放置在该网格的第一行和第一列中。这将迫使它们重叠，再次形成一个漂亮的正方形网格。

4) 放置图像

让我们在那里为每个图像放置一个合适的src。如果我们确保图像使用width: 100%填充空间（并限制自身），我们将看到它们沿着网格项目的顶部

还不错，但我们更希望看到它们居中。这是一个技巧。首先，我们还将使它们的height: 100%，这会扭曲它们

然后使用object-fit修复它！

.grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

就是这样

这将响应式工作

5) 奇特的拖动大小

这（可能）不是什么大问题，但请注意，当您将徽标拖离（例如，用户在尝试保存一个徽标时可能会这样做）时，徽标是什么样的

这些图像看起来就像width: 100%; height: 100%;没有object-fit: contain;。

以下是到目前为止的工作演示，其中包含该怪癖

6) 改用绝对定位

如果拖动怪癖是一个大问题，我们可以始终将图像绝对定位在网格子元素内。

以下是一种方法，假设网格子元素 div 为position: relative;

.grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

还有一种方法

.grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这两种方法都可以解决拖动怪癖。以下是一个演示

视频

如果您想观看此过程的视频演练，请前往这里！