怎么用CSS Grid实现多行多列不规则相册排版-css教程-PHP中文网

不规则相册的本质是用grid-row/grid-column让图片跨行跨列，打破均分网格；需设display: grid、合理定义轨道，配合object-fit保持图片比例，避免手动维护失控。

怎么用css grid实现多行多列不规则相册排版

Grid 中用 `grid-row` 和 `grid-column` 手动控制每个图片占位

不规则相册的本质，是让某些图片「跨多行」或「跨多列」，打破均分网格的默认行为。CSS Grid 提供了明确的定位能力，不需要 JS 计算位置，也不依赖 float 或 inline-block 的 hack 方式。

关键不是靠 grid-template-columns 一行定义列宽就完事，而是给每个 <img> 单独设置 grid-row 和 grid-column，比如：

.item-1 { grid-row: 1 / 3; grid-column: 1 / 2; }  /* 跨 2 行，占第 1 列 */
.item-2 { grid-row: 1 / 2; grid-column: 2 / 4; }  /* 跨 2 列，占第 1 行 */
.item-3 { grid-row: 2 / 4; grid-column: 2 / 3; }  /* 跨 2 行 1 列 */

这样就能组合出 L 形、T 形、竖长条、横大图等任意布局。前提是容器已设 display: grid，且定义了足够多的行/列轨道（可用 grid-auto-rows 和 grid-auto-columns 配合隐式网格）。

用 `grid-auto-flow: dense` 填满空隙，但要小心顺序错乱

手动指定每个 item 的行列范围后，网格里容易出现「空洞」——比如 item-1 占了 (1,1)→(3,1)，item-2 占了 (1,2)→(1,4)，那 (2,2) 和 (2,3) 就空着。这时候加 grid-auto-flow: dense，会让后续未显式定位的 item 自动填进去。

但注意：dense 不改变 DOM 顺序，只改变渲染顺序。如果语义顺序重要（比如屏幕阅读器、SEO），或者你依赖 :nth-child 伪类做样式，它可能打乱视觉与逻辑的一致性。

适合纯展示型相册，无交互、无语义依赖
避免和 order 混用，两者叠加行为难预测
填空是“尽力而为”，不保证最优布局；空洞太多时，不如重新规划 item 的 grid-row/grid-column

响应式下别硬写固定行列数，改用 `grid-template-rows/columns` + `minmax()`

写死 grid-row: 1 / 4 在小屏上会撑爆容器。更稳妥的做法是：容器用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 定义列数自适应，再配合 grid-auto-rows: 200px 统一行高，然后让图片通过 grid-row/grid-column 跨轨道 —— 这里的“行”“列”指的是轨道索引，不是像素值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

例如：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 200px;
  gap: 8px;
}
.item-wide { grid-column: span 2; }   /* 在当前行里跨 2 列轨道 */
.item-tall { grid-row: span 2; }      /* 在当前列里跨 2 行轨道 */

这样缩放时，列数自动增减，跨距仍按轨道数计算，不会错位。