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一个背景和一个强制高度,我们将看到类似以下内容:

网格项目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;
}

效果如下:

完整显示

改用绝对定位

这是一种方法,假设网格子divposition: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>

结语

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

关注web前端开发的个人技术博客,分享前端经验和技巧
码云笔记 » CSS Grid 实现正方形带徽标的网格布局

发表评论

提供最优质的资源集合

立即查看 了解详情