码云前端开发 2020-05-11

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

文章目录隐藏

网格布局
快速创建网格
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://media.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>