CSS网格布局居中元素遇子元素尺寸不一致的间距优化问题

使用3行3列CSS Grid布局（列宽设为min-content），单元格内元素居中显示。标题内容较短时布局正常，但标题过长时，开关与分类文本的间距会过大。尝试过将中间行放入Flex容器（因分类文本尺寸不同无法正确居中）、统一分类尺寸（导致组件整体居中偏移），需求是缩小该间距的同时，保持开关始终位于标题和按钮的正中间。

核心思路是限制中间列的宽度，避免标题过长撑开列宽，同时调整分类文本的对齐方式，缩小与开关的间距：

1. 修改Grid列模板，将中间列宽度固定为按钮的宽度（7rem），左右列自适应分类文本宽度，避免标题撑开中间列：

.category-switch {
  display: grid;
  // 替换原repeat(3, min-content)，中间列最大宽度匹配按钮宽度
  grid-template-columns: auto fit-content(7rem) auto;
  grid-template-rows: repeat(3, min-content);
  gap: 0.8rem;
  width: max-content;
}

2. 调整分类文本的对齐方式，让左侧分类右对齐、右侧分类左对齐，使分类与开关的间距仅为设置的gap值：

.category-switch__category {
  &--1 {
    grid-row: 2/3;
    grid-column: 1/2;
    justify-self: end; // 左侧分类右对齐，贴近中间列
  }

  &--2 {
    grid-row: 2/3;
    grid-column: 3/4;
    justify-self: start; // 右侧分类左对齐，贴近中间列
  }
}

3. 确保标题在中间列内换行并居中，避免因标题过长撑开列宽：

.category-switch__title {
  grid-row: 1/2;
  grid-column: 2/3;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
  word-wrap: break-word; // 标题过长时自动换行
}

修改后效果：

• 中间列宽度由按钮（7rem）决定，标题过长时自动换行，不会撑开列宽
• 分类与开关的间距固定为设置的gap: 0.8rem，不会随标题长度变化
• 开关始终位于标题和按钮的正中间，组件整体居中时也不会偏移

.category-switch {
    display: grid;
    grid-template-columns: auto fit-content(7rem) auto;
    grid-template-rows: repeat(3, min-content);
    gap: 0.8rem;
    width: max-content;

    // Title
    &__title {
        grid-row: 1/2;
        grid-column: 2/3;
        font-weight: bold;
        text-transform: capitalize;
        text-align: center;
        word-wrap: break-word;
    }

    // Placing category text
    &__category {
        &--1 {
            grid-row: 2/3;
            grid-column: 1/2;
            justify-self: end;
        }

        &--2 {
            grid-row: 2/3;
            grid-column: 3/4;
            justify-self: start;
        }
    }

    // The switch position
    &__switch {
        grid-row: 2/3;
        grid-column: 2/3;
        justify-self: center;
    }

    // The button css
    &__btn {
        grid-row: 3/4;
        grid-column: 2/3;
        display: grid;
        place-items: center;
        position: relative;
        width: 7rem;
        height: 2.8rem;
        background: #d02b2b;
        border-radius: 0.5rem;
    }
}

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