CSS, пытаюсь центрировать элемент, но его дочерние элементы не одинакового размера ⇐ Html

[Anonymous]

Привет, ребята, вот изображение того, что у меня сейчас есть


У меня есть сетка из 3 строк и 3 столбцов (каждый столбец имеет минимальное содержание)
и я центрировал элементы в каждой ячейке.
Это выглядит нормально, но если мой заголовок станет намного больше, пространство между переключателем и категориями становится слишком большим:


теперь я попробовал сделать среднюю строку внутри контейнера div и использовать flex, но тогда элементы не будут центрироваться правильно, потому что размер одной категории больше, чем другой.
Я также пытался сделать размер категорий одинаковым, но потом, когда я попробуйте центрировать весь компонент где-нибудь на странице, он смещается слишком сильно вправо из-за пустого пространства в меньшей категории.
Есть идеи, как сделать это пространство намного меньше, но сохранить переключатель точно посередине заголовка и кнопки?
Вот код:
HTML:

Код: Выделить всё

Disable









Male
Female
gender

И код scs:

Код: Выделить всё

.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.


Подробнее здесь: https://stackoverflow.com/questions/747 ... -same-size