1. 首页
  2. css

CSS方格图案

让我们建立一个正方形的文字网格,我们将把一些杂志的标志放在每个正方形的中心。我想很多人以前都需要建立一个标识网格。你可能已经想象过了:网站上列出捐赠者、赞助者的区域,或者是展示所有使用某种产品的大公司的区域。把logo放在正方形中是一个不错的处理方法,因为它强制在logo中使用一些干净的结构,这些logo的大小、宽高比和视觉权重都不同,这会变得很挑剔,看起来很邋遢。
\”grid\”指的是CSS grid。建立一个由(灵活的)正方形组成的网格本身就是一个小技巧。然后我们会把这些标志放在那里,保持它们的大小和中心。最后,我们来看一个奇怪的地方。1)网格标记
您在支持Emmet的编辑器中尝试过这个吗?
.grid>div*5>img
然后按tab。它将扩展到:

Just a little trick for working quickly.2) CSS Grid basics
We\”ll use the infamous flexible columns technique:
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 1rem;}
,这不仅为我们提供灵活的列,而且提供灵活的列数。记住,我们并不在乎有多少列,我们只是在构建一个标识网格来显示。
如果我们给每个网格项div一个背景和一个强制高度,我们会看到这样的结果:这个屏幕截图的父级宽度约为800px。由于网格的魔力,这里看到的三列将增加或减少以填充空间。2)制作真正的正方形而不是强制网格项达到任何特定高度,让我们使用纵横比技巧。我们将在其中插入一个空的伪元素padding-bottom: 100%;,这意味着它将强制高度至少与宽度一样高。
.grid > div {background: black;padding: 1rem;}.grid > div::before {content: \”\”;padding-bottom: 100%;display: block;}
如果我们暂时隐藏图像,你会看到矩形网格变成了一个完美的正方形网格:3)与图像重叠,因为图像位于伪元素中,所以它们变长了一点长方形。
我们需要一种方法使它们相互重叠。通常,通过纵横比技术,我们可以达到绝对定位,将子容器放置在子容器中以覆盖现在纵横比的形状。但是既然我们已经在使用grid了,那么让我们再次使用grid将项目放置到同一个空间中:
.grid > div {/* … */display: grid;}.grid > div::before,.grid > div > img {grid-area: 1 / 1 / 2 / 2;}
这意味着将主网格的网格项目也放置到网格容器中,没有显式的行和列,然后将伪元素和图像放置到该网格的第一行和第一列。这将迫使它们重叠,再次形成一个漂亮的正方形网格。如果我们确保图像用width: 100%填满空间(并限制它们自己),我们将看到它们沿着网格项的顶部:
不可怕,但我们更希望看到它们居中。这里有一个技巧。首先,我们还将使他们的height: 100%,这扭曲了他们:
,然后用object-fit修复它!
.grid > div > img {width: 100%;height: 100%;object-fit: contain;}
我们开始了:
它将响应地工作:5)奇怪的拖拽大小
这(可能)不是一笔大买卖,但请注意,当您将徽标拖离时,它们的外观(就像用户试图保存徽标时的外观):
图像看起来像是有width: 100%; height: 100%;而没有object-fit: contain;。
这是到目前为止的工作演示,有一个怪癖:CodePen Embed Fallback6)使用绝对定位来代替
如果拖拽是个大问题,我们总是可以将图像绝对定位在网格子级中。
这里有一种方法,假设网格子级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%);}
任何一个修正了拖拉的怪癖。下面是一个演示:CodePen Embed Fallback视频
如果您想观看所有这些内容的视频演示,就来吧!

CSS方格图案 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%96%b9%e6%a0%bc%e5%9b%be%e6%a1%88/