CSS Grid图片画廊布局调整：实现缩略图左列、大图右侧固定展示

修改后的CSS代码 #

.gallery {
  display: grid;
  grid-template-columns: 120px 1fr; /* 定义两列：左侧缩略图列宽120px，右侧大图占剩余宽度 */
  grid-gap: 20px;
  max-width: 100%;
  align-items: start; /* 顶部对齐，避免大图被拉伸 */
}
.gallery input[type="radio"] {
  display: none;
}
.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 0 0 10px 0; /* 调整边距，改成上下间距，去掉左右边距 */
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  grid-column: 1 / 2; /* 所有缩略图固定放在第一列 */
}
.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}
.gallery img {
  display: none;
  grid-column: 2 / 3; /* 所有大图固定放在第二列 */
  grid-row: 1 / -1; /* 大图占满所有行的第二列位置，固定在右侧不动 */
  width: 100%;
  transition: all 150ms linear;
}
.gallery input[name="select"]:checked + label + img {
  display: block;
}
.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    box-sizing: border-box; /* 新增避免padding撑宽标签 */
    text-align: center;
}
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}

需同步调整的HTML问题 #

现有HTML中存在两个相同的id="img-tab-19"，会导致单选功能异常，将重复的id改成唯一值即可，比如改成id="img-tab-20"，对应label的for属性也同步修改。

核心修改说明 #

1. 给gallery容器新增grid-template-columns属性定义两列布局，左侧固定宽度放缩略图，右侧自适应放展示大图
2. 给label新增grid-column: 1 / 2强制所有缩略图排在左侧第一列
3. 给img标签修改grid-column为第二列，新增grid-row: 1 / -1让选中的大图始终固定在右侧区域，不会随缩略图排列位移
4. 给overlay新增box-sizing: border-box避免padding撑满容器导致宽度溢出
5. 调整了label的边距，适配垂直排列的缩略图布局

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