在前端开发中，图片墙布局是一种常见的设计布局，它可以让我们展示一系列图片的缩略图，并且可以在用户点击图片后展示对应的大图。在过去，实现图片墙布局需要使用 JavaScript 或者 jQuery 等工具库，但是在现代浏览器中，我们可以使用 CSS Grid 来实现这个布局，而且更加简便易行。
CSS Grid 简介
CSS Grid 是一种二维网格布局系统，它可以让我们在一个容器中创建行和列，并且可以将子元素放置在这些网格中。CSS Grid 提供了非常灵活的布局方式，可以适应不同的设备和屏幕大小。
容器属性
在使用 CSS Grid 布局时，我们要先定义一个容器，然后在容器中创建网格。下面是一些常用的容器属性：
display: grid;：定义容器为网格布局。grid-template-columns：定义列的数量和宽度。grid-template-rows：定义行的数量和高度。grid-gap：定义网格之间的间距。grid-auto-flow：定义子元素在网格中的放置方式。
子元素属性
在容器中创建网格后，我们可以在网格中放置子元素。下面是一些常用的子元素属性：
grid-column-start：定义子元素开始的列。grid-column-end：定义子元素结束的列。grid-row-start：定义子元素开始的行。grid-row-end：定义子元素结束的行。grid-column：同时定义子元素开始和结束的列。grid-row：同时定义子元素开始和结束的行。
实现图片墙布局
下面我们来详细介绍如何使用 CSS Grid 实现图片墙布局。
HTML 结构
我们先来看一下 HTML 结构：
-- -------------------- ---- -------
---- -------------------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
---- ------------------------
---- ---------------- -------
------
------我们将每个图片放置在一个 div 中，并且将它们放置在一个名为 image-wall 的容器中。
CSS 样式
接下来，我们来为图片墙布局添加样式：
-- -------------------- ---- ------- ----------- - -------- ----- ---------------------- --------- ----- --------- ----- - ---------------- - --------- --------- --------- ------- - ---------------- --- - ------ ----- ------- ----- ----------- ------ ----------- --------- ---- --------- - ---------------------- --- - ---------- ----------- -
首先，我们将 image-wall 容器设置为网格布局，并且定义了三列，每列的宽度都为 1fr，也就是平均分配列的宽度。我们还定义了网格之间的间距为 10px。
接下来，我们将每个 image-wall-item 设置为相对定位，并且将其超出部分进行隐藏。然后，我们将图片的宽度和高度都设置为 100%，并且使用 object-fit: cover 让图片自适应容器大小，同时保持比例。最后，我们为图片添加了一个 hover 效果，让用户在鼠标悬停时可以看到更清晰的图片。
效果展示
最终，我们实现了一个简单的图片墙布局，可以让用户在点击图片时展示对应的大图。
总结
在本文中，我们介绍了如何使用 CSS Grid 来实现图片墙布局。CSS Grid 提供了非常灵活的布局方式，可以让我们轻松地创建各种复杂的布局。如果你还没有掌握 CSS Grid，那么现在就是时候学习它了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658f13edeb4cecbf2d4cc604