CSS Grid画廊图片堆叠在页面右侧如何修复

你的Grid布局失效核心原因是grid-template-areas声明不符合语法规则：

• 你通过grid-template-columns: 1fr 1fr 1fr 1fr定义了网格为4列结构，按照规范，grid-template-areas里每一行的区域名称数量必须严格等于列数
• 你写的最后一行区域规则是"img9 img10"，仅提供了2个区域名，和定义的4列不匹配，属于无效声明，会导致整个网格模板解析失败
• 模板失效后，没有被正确分配网格位置的元素会被浏览器塞入隐式生成的网格轨道，最终出现所有图片堆叠在页面右侧的现象。

1. 修正网格区域声明 #

根据你的布局需求补全最后一行的4个位置，两种常用方案可选：

方案1：最后一行2张图各占2列（视觉更均衡） #

通过重复区域名实现元素跨列，补全4个位置即可：

#index-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas:
    "gallery-p gallery-p gallery-p gallery-p"
    "gallery-h2 gallery-h2 gallery-h2 gallery-h2"
    "img1 img2 img3 img4"
    "img5 img6 img7 img8"
    "img9 img9 img10 img10";
}

方案2：最后一行2张图各占1列，剩余位置留空 #

用.代表空的网格单元格，凑够4个位置即可：

#index-gallery {
    /* 其余属性不变 */
    grid-template-areas:
    "gallery-p gallery-p gallery-p gallery-p"
    "gallery-h2 gallery-h2 gallery-h2 gallery-h2"
    "img1 img2 img3 img4"
    "img5 img6 img7 img8"
    "img9 img10 . .";
}

2. 补全剩余图片的区域绑定 #

你当前只写了.img1、.img2、.img3的grid-area声明，记得给.img4到.img10都加上对应的区域绑定规则，例：

#index-gallery .img4 {
    grid-area: img4;
    background-image: url("../img/thumbs/img4.jpg");
}
/* 按相同规则补全img5到img10的样式即可 */

内容的提问来源于stack exchange，提问作者Yippiekaiaii