CSS grid-auto-flow: column布局下子元素百分比宽度失效问题

需要实现线条与多个行内元素的水平灵活排布，预期效果如下：

• 常规实现方案为Flex布局搭配gap属性，但旧版本iOS系统不支持Flex场景下的gap属性，无法直接使用。
• 尝试使用grid-auto-flow: column实现同等布局时，子元素的宽度设置无法正常生效，百分比宽度值无法被正确解析。

import styled from "styled-components";

export const Container = styled.div`
  width: 375px;
  display: grid;
  /* grid-template-columns: repeat(5, 1fr); */
  grid-auto-columns: auto;
  place-content: center;
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;

export const Flex = styled.div`
  width: 375px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid blue;
`;

export const LineWithPercentage = styled.div`
  width: 42%;
  border-bottom: 1px solid black;
`;

export const LineWithPX = styled.div`
  width: 164px;
  border-bottom: 1px solid black;
`;

export const NumberWrapper = styled.div`
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: pink;
`;
export const Number = styled.span`
  color: white;
`;

export default function App() {
  return (
    <>
      <Container>
        <NumberWrapper>
          <Number>1</Number>
        </NumberWrapper>
        <NumberWrapper>
          <Number>2</Number>
        </NumberWrapper>
        <span>Percentage</span>
        <LineWithPercentage />
        <NumberWrapper>
          <Number>3</Number>
        </NumberWrapper>
      </Container>
      <br />
      <br />
      <Flex>
        <NumberWrapper>
          <Number>1</Number>
        </NumberWrapper>
        <NumberWrapper>
          <Number>2</Number>
        </NumberWrapper>
        <span>Px</span>
        <LineWithPX />
        <NumberWrapper>
          <Number>3</Number>
        </NumberWrapper>
      </Flex>
    </>
  );
}

问题根源是设置grid-auto-columns: auto时，自动生成的网格列宽默认由内容撑开，没有明确的尺寸计算基准，子元素设置的百分比宽度找不到可参照的父列尺寸，自然无法生效。
可直接通过显式定义网格列规则解决，不需要给分隔线手动设置百分比或固定像素宽度：

1. 移除Container里的grid-auto-columns: auto和place-content: center配置，按照子元素的排布顺序定义列模板：固定尺寸的数字标签、文本对应列设为auto（宽度由内容撑开），需要自适应伸缩的分隔线对应列设为1fr（自动占满剩余所有空间）。
2. 修改后的Container样式如下：

export const Container = styled.div`
  width: 375px;
  display: grid;
  // 按子元素顺序：2个固定尺寸数字标 -> 固定尺寸文本 -> 自适应分隔线 -> 固定尺寸数字标
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;

3. 分隔线元素可以移除所有宽度相关设置，只保留边框样式即可：

export const Line = styled.div`
  border-bottom: 1px solid black;
`;

该方案的布局表现和Flex+gap完全一致，分隔线会自动适配其他元素的宽度变化、伸缩填充剩余空间，兼容性覆盖iOS 10.2及以上所有版本，不存在旧系统兼容问题。

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