我正在React中处理一个页面，在网格布局中遇到了一些奇怪的问题。
我创建了一个2列网格，其中包含许多项，有些项跨越2列。我使用网格是因为我希望一些按钮（这里是黄色方块）对齐。
问题是第一列占用的空间比实际需要的多得多：我希望按钮组左边和右边的空间是相同的。
这个问题在这个简化的屏幕截图中很明显，其中“yyy”行左侧的空间比右侧的空间宽：

第一行文本越长，情况就越糟。
如果“xxx”文本不换行，则没有问题。
我不能创建一个只包含按钮的网格，因为在真实的的应用程序中，文本、按钮和其他一些项目是随机交错的。
我不想使用固定宽度。
这是怎么回事，我如何才能确保“xxx”文本不会影响网格布局这种方式？
以下是与此屏幕截图对应的简化React代码：

<div style={{ width: '360px' }}>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: 'auto auto',
                placeContent: 'center',
                placeItems: 'center',
                gap: '0.75rem',
                border: '1px solid red',
                fontSize: '16px',
                lineHeight: '1.5',
                // textAlign: 'center',
                fontFamily: 'Roboto, Helvetica, Arial, sans-serif, ui-sans-serif, system-ui',
              }}
            >
              <div
                style={{
                  gridColumnStart: '1',
                  gridColumn: 'span 2 / span 2',
                  border: '1px solid green',
                }}
              >
                xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xx
              </div>

              <div
                style={{
                  width: '1.75rem',
                  height: '1.75rem',
                  justifySelf: 'end',
                  gridColumnStart: 1,
                  border: '1px solid purple',
                  backgroundColor: 'yellow',
                }}
              />
              <div
                style={{
                  justifySelf: 'start',
                  border: '1px solid purple',
                }}
              >
                yyy yyy yyy yyy yyy yyy yyy
              </div>

              <div
                style={{
                  width: '1.75rem',
                  height: '1.75rem',
                  justifySelf: 'end',
                  gridColumnStart: 1,
                  border: '1px solid purple',
                  backgroundColor: 'yellow',
                }}
              />
              <div
                style={{
                  justifySelf: 'start',
                  border: '1px solid purple',
                }}
              >
                zzz zzz
              </div>
            </div>

          </div>

编辑12月27日

添加代码sandbox link here。
这样，您可以看到文本的第二行决定了网格左列宽度。

编辑05年1月

我尝试过不同的浏览器，这种行为对所有的浏览器都是一样的，所以它似乎与css的网格规格，以及如何计算间距有关。有人想到吗？谢谢！

编辑01/22添加图纸以阐明哪些空间应相同：

解决方案01/24正如所回答的，解决方案是创建一个4列网格，而不是2列网格。gridTemplateColumns: 'auto auto auto auto'解决方案没有100%达到目标，因为yyy行仍然比应该的更快地换行：

但是将其更改为gridTemplateColumns: '1fr auto auto 1fr'似乎可以实现目标：

以下是简化的React代码，带有解决方案：

<div style={{ width: '360px' }}>
  <div
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto auto 1fr', // 4 columns
      placeContent: 'center',
      placeItems: 'center',
      gap: '0.75rem',
      border: '1px solid red',
      fontSize: '16px',
      lineHeight: '1.5',
      // textAlign: 'center',
      fontFamily: 'Roboto, Helvetica, Arial, sans-serif, ui-sans-serif, system-ui',
    }}
  >
    <div
      style={{
        gridColumnStart: '1',
        gridColumn: 'span 4', // Text spans 4 columns
        border: '1px solid green',
      }}
    >
      xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xx
    </div>

    <div
      style={{
        width: '1.75rem',
        height: '1.75rem',
        justifySelf: 'end',
        gridColumnStart: 2, // Button & label use the center 2 columns
        border: '1px solid purple',
        backgroundColor: 'yellow',
      }}
    />
    <div
      style={{
        justifySelf: 'start',
        border: '1px solid purple',
      }}
    >
      yyy yyy yyy yyy yyy yyy yyy
    </div>

    <div
      style={{
        width: '1.75rem',
        height: '1.75rem',
        justifySelf: 'end',
        gridColumnStart: 2,
        border: '1px solid purple',
        backgroundColor: 'yellow',
      }}
    />
    <div
      style={{
        justifySelf: 'start',
        border: '1px solid purple',
      }}
    >
      zzz zzz
    </div>
  </div>

</div>