css初学者实战_做一个基本的图片画廊

用 CSS Grid 实现图片画廊最省事，只需容器设 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)))，配 object-fit: cover 统一图片尺寸，原生 实现点击放大，响应式优先真机测试再调 minmax 下限。

图片画廊用 display: grid 最省事

初学者常从 float 或 inline-block 入手，结果卡在间隙、换行、宽高不一致上。直接用 grid 能绕过 80% 布局坑，兼容性也够——现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都支持，连 Edge 16 也没问题。

关键不是“学会 grid”，而是抓住两个必需声明：

• display: grid 必须加在容器上（比如 .gallery）
• grid-template-columns 决定每行几列，别写死像素，用 repeat(auto-fill, minmax(250px, 1fr))) 让它自适应

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
  gap: 12px;
}

图片尺寸失控？用 object-fit: cover 强制统一

用户上传的图宽高比千奇百怪，width: 100% + height: 200px 会拉伸变形；只设 width: 100% 又导致高度不齐。真正该做的是让图片“居中裁剪”：

• 给 加 width: 100% 和 height: 200px（或用 aspect-ratio: 4/3）
• 必须加 object-fit: cover，否则默认是 fill（拉伸）
• 别忘了 object-position: center，确保裁剪时居中取图

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

点击放大？原生

比 JS 插件更轻量

很多教程一上来就教用 Lightbox 类库，但纯 CSS + 原生 HTML 就能搞定基础弹窗，不用加载 JS、不操心事件绑定。

Remio

AI知识库管理工具

下载

立即学习“前端免费学习笔记（深入）”；

• 用
  标签包住大图，配合 showModal() 方法触发（一行 JS 就够）
• 点击缩略图时，把它的 src 赋给弹窗里的 ，再调用 showModal()
• 弹窗内加一个 × 实现关闭
• 注意：Safari 15.4+ 才完全支持
  ，旧版 Safari 需降级为 display: none/block

  @@##@@
  ×

响应式断点别乱加，先测手机再补平板

新手常一上来就写 @media (max-width: 768px) 和 @media (max-width: 480px)，结果发现手机上看还是挤。真实优先级是：

• 先在真机或 Chrome DevTools 的 “Device Toolbar” 里切到 iPhone SE（375px 宽），看 grid 是否自动缩成 1 列
• 如果没缩，说明 minmax(250px, 1fr) 的下限太高，改成 minmax(180px, 1fr)
• 平板（768px）通常不用额外断点——grid 自己会按容器宽度重排，除非你刻意限制最大列数
• 避免用 max-width 做断点，改用 min-width 更符合渐进增强逻辑

复杂点往往不在代码多寡，而在是否真去手机上点开看了三张不同比例的图——有两张黑边、一张被裁掉半张脸，那 object-position 就得调，而不是换框架。