移动端响应式适配：自定义作品集网格2列布局异常排查

异常产生的核心原因 #

• 原方案直接给网格项设置display: inline-block，没有处理inline-block元素自带的字符间隙问题，同时没有重置父级VC行容器的默认文本对齐、内边距规则，受节点空白符、原有布局属性影响，极易出现两列整体左偏、仅占半屏宽度的错位。
• 没有清除网格元素默认的content-box宽度模型、VC框架自带的浮动/边距残留，也没有约束网格项内部的图片尺寸，最终导致块面尺寸被压缩、特色图片无法正常渲染。

替换用的完整适配代码 #

将原479px断点下的CSS整体替换为如下内容：

@media only screen and (max-width: 479px) {
  /* 重置VC网格行容器布局，消除错位根源 */
  .vc_basic_grid .vc_grid.vc_row,
  .vc_media_grid .vc_grid.vc_row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
  }

  /* 重设网格项的2列布局规则 */
  .vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item,
  .vc_media_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item {
    display: block !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding: 4px; /* 可根据需要调整两列间距 */
    margin: 0 !important;
    float: none !important;
  }

  /* 保证特色图正常显示 */
  .vc_basic_grid .vc_grid-item img,
  .vc_media_grid .vc_grid-item img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

关键调整逻辑说明 #

• 废弃inline-block布局，改用flex+自动换行实现2列效果，从根源上避免字符间隙、文本对齐属性导致的左偏问题，两列会自动撑满整个容器宽度。
• 增加box-sizing: border-box规则，确保设置的50%宽度包含元素自身的内边距，不会因为默认的content-box模型导致两列总宽溢出、错位。
• 清除VC框架自带的浮动、外边距残留，避免原有布局规则和新的2列规则产生冲突。
• 强制网格项内的特色图宽度占满父容器、高度等比自适应，避免图片被挤压变形、无法正常展示。
• 通过网格项的内边距控制两列间距，不需要额外加外边距，布局计算更稳定。

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