基于 CSS 网格的响应式图片库

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

刚刚发布了另一个 CSS 教程，这次是一个关于如何使用 CSS 网格布局创建一个精美的响应式网页图库的实践练习。使用网格布局的好处在于，我们可以实现类似“瀑布流”的布局，而无需任何 JavaScript。

请考虑订阅我们的YouTube频道！

以下是我在视频中用来创建图库的一些 CSS 小技巧。

• CSS 网格模板列- 创建一个 6 列网格
• CSS 网格模板自动行- 创建交替高度的自动行，以增加视觉趣味性
• CSS 动画- 创建一个在画廊鼠标悬停时向下滚动显示标签的动画效果
• CSS 变换- 用于在鼠标悬停在图像缩略图上时创建“缩放效果”
• CSS Grid Spans - 让图片跨越任意列和行变得非常简单
• CSS 对象 Fit - 使缩略图在调整视口大小时保持居中
• CSS 背景滤镜- 用于在标签动画显示时为其添加一些炫酷效果（模糊和饱和度）（在 Firefox 中无效）
• CSS 媒体查询——只需两行代码即可将移动视图转换为单列显示