CSS Grid 实现正方形带徽标的网格布局

今天码云笔记要带大家实现的正方形的字面网格效果，相信大家在一些网站看到过，在站点上列出捐赠者，赞助者的区域，或者显示所有使用某种产品的大型公司，所以将徽标放到正方形中是一种不错的处理方式。

网格布局

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。关于对 Grid 布局还不是很会的小伙伴可以到我之前这篇文章学习一下《CSS Grid 网格布局实例教程》，这里我不做过多的基础讲解。

快速创建网格

在支持 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>

不要惊讶，这只是快速创建的小技巧而已。

CSS Grid 基础

这里我们将使用可变列技术：

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

这将会给我们的不仅是灵活列，还是灵活的数列。请记住，我们并不真正在乎有多少列-我们只是在构建徽标网格来显示。

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

制作实心方块

让我们使用长宽比技巧，而不是将网格项强制设置为任何特定高度。我们将在其中放置一个空的伪元素，这padding-bottom:100%;意味着它将迫使高度至少与宽度一样高。

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

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

此时，我们会看到矩形网格已成为完美正方形的网格：

图像重叠

但是，在其中有图像的情况下，它们会长一些，因为图像位于伪元素中。

我们需要一种将它们彼此叠放的方法。通常，通过长宽比技术，我们可以进行绝对定位，以放置子容器以覆盖现在的长宽比形状。但是由于无论如何我们都在使用网格，所以让我们再次使用网格将项目放置在相同的空间中：

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

也就是说，将主网格的网格项也放入没有明确行和列的网格容器中，然后将伪元素和图像都放置在该网格的第一行和第一列上。这将迫使它们重叠，从而再次形成漂亮的正方形网格。

放置图像

让我们 src 在其中为每个图像放置一个适当的图像。如果我们确定图像使用填充了空间（并限制了自身）width:100%，我们将在网格项的顶部看到它们：

并不可怕，但是我们希望看到它们居中。这是做到这一点的一个技巧。首先，我们还将设置它们height: 100%，使它们失真：

然后用 object-fit！

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

效果如下：

改用绝对定位

这是一种方法，假设网格子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%);
}

最终效果就是首图展示的样子。

完整代码：

/* css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}
.grid > div {
  background: #18C5FF;
  padding: 1rem;
  position: relative;
}
.grid > div::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

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

body {
  background-color: #f2f2f2;
  margin: 2rem;
}
/* HTML */
<div class="grid">
  <div><img src="https://mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
</div>

结语

以上就是今天码云笔记为大家带来的 CSS Grid 实现正方形带徽标的网格布局全部内容，有需要类似的布局，大家可以拿来参考一下。

以上关于CSS Grid 实现正方形带徽标的网格布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。