大家好，这是我目前拥有的一张图片

我有一个3行3列的网格（每列都是最小内容），我把每个单元格中的元素放在中间，看起来还不错，但是如果我的标题变大了，开关和类别之间的空间就会变得太大：

现在我试着在div容器中创建中间行并使用flex，但是元素不会居中，因为一个类别的大小比另一个大。
我也试着让类别大小相同，但当我在页面上的某个地方将整个组件居中时，它太靠右了，因为较小的类别有白色。
有没有什么想法，如何使空间小得多，但保持开关正好在标题和按钮的中间？
验证码：
HTML：

<div class="category-switch">
  <div class="form-check category-switch__btn">
    <input class="form-check-input" type="checkbox" />
    <label class="form-check-label form-label">Disable</label>
  </div>
  <div class="category-switch__switch">
    <div class="switch">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" />
        <label class="form-check-label form-label"></label>
      </div>
      <span class="switch__slider switch__round"></span>
    </div>
  </div>
  <span class="category-switch__category category-switch__category--1">Male</span>
  <span class="category-switch__category category-switch__category--2">Female</span>
  <span class="category-switch__title">gender</span>
</div>

和scss代码：

.category-switch {
    // The grid to place the items
    display: grid;
    grid-template-columns: repeat(3, min-content);
    grid-template-rows: repeat(3, min-content);
    gap: 0.8rem;
    place-items: center;
    justify-items: center;
    // Makes the component be the width of its content
    width: max-content;

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

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

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

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

    // 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;
    }
}

我试图使代码尽可能少，并删除了一些与定位scss无关的代码。