基于 CSS 实现的时尚网格布局图片库

这款 HTML CSS 中的时尚图片库网格以极具吸引力的网格布局展示图片，它能无缝排列图片，它有助于优雅地显示视觉内容。您可以在自己的网站上使用此代码来显示时尚图片库。它能增强视觉吸引力，让您的网站更引人入胜。

下面展示如何在 HTML CSS 中创建时尚图片库网格

1、首先，让我们为图片库设置 HTML 结构。我们将使用 "gallery "类的 <article> 元素来包含图片。

接下来，让我们为图片库添加一些图片。您可以使用 <img> 元素，其中 src 属性指向图片的 URL，alt 属性提供可访问性的替代文本。

<article class="gallery">
  /*这里仅展示部分示例代码，下载后查看完整版代码*/
  <img src="https://assets.codepen.io/1506195/unsplash-music-0.avif" alt="guitar player at concert" />
</article>

2.现在，让我们使用 CSS 来设计我们的图库，实现时尚的网格布局。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
.gallery {
  --size: 100px;
  display: grid;
  grid-template-columns: repeat(6, var(--size));
  grid-auto-rows: var(--size);
  margin-bottom: var(--size);
  place-items: start center;
  gap: 5px;
  
  &:has(:hover) img:not(:hover),
  &:has(:focus) img:not(:focus){
    filter: brightness(0.5) contrast(0.5);
  }
}

您还可以通过添加过渡效果、悬停效果等进一步自定义图库的外观，以增强用户体验。

将 HTML 代码复制到网页 HTML 文件的相应部分，将 CSS 代码复制到 CSS 文件或 HTML 文件的 <style> 标记中。