imgStart为false时Grid-template-areas对应区域异常拉伸如何修复

问题根因 #

• 错误使用了grid-auto-columns属性：该属性仅对隐式生成的网格列生效，你当前通过grid-template-areas显式声明了2列网格，该属性不会生效，浏览器默认按内容自适应分配列宽，才会出现两侧宽度不一致的问题
• 媒体查询代码存在语法错误：imgStart为false时的grid-template-areas值末尾缺失右单引号，会导致样式解析异常

修复后代码 #

export const AboutRow = styled.div`
  display: grid;
  // 显式定义桌面端两列等宽
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-template-areas: ${({ imgStart }) =>
    imgStart ? "'col2 col1'" : "'col1 col2'"};

  @media screen and (max-width: 768px) {
    // 移动端统一为单列布局
    grid-template-columns: 1fr;
    grid-template-areas: ${({ imgStart }) =>
      imgStart ? "'col1' 'col2'" : "'col1' 'col2'"};
  }
`;

修复说明 #

• 替换grid-auto-columns为grid-template-columns: 1fr 1fr，显式指定桌面端两列始终均分宽度，和区域排列顺序无关
• 移动端统一设置为单列布局，简化代码逻辑，同时规避原代码的语法错误
• 修复了原媒体查询语句中缺失的单引号问题，避免样式解析失败

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