Как я могу равномерно распределить столбцы в CSS Grid (например, пространство между ними во Flexbox)? [дубликат] ⇐ CSS

[Anonymous]

Я создаю макет калькулятора с помощью CSS Grid, но хочу убедиться, что столбцы равномерно распределены по контейнеру, с одинаковым пространством между каждой кнопкой, аналогично тому, как работает свойство flexbox justify-content: space-between. Я хочу убедиться, что сами столбцы имеют ровные промежутки между собой, а левый и правый края кнопок выровнены с краями контейнера.
Вот моя HTML структура:

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

Calculator
[*]



Screen

AC
()
%
+
7
8
9
*
4
5
6
-

А вот CSS, который я использую:

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

/* General reset for margin, padding, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Calculator container */
.calculator {
border-radius: 1.5rem;
min-height: 80vh;
max-width: 350px;
background-color: #fae4e4;
padding: 1rem;
margin: 0 auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Calculator screen */
.screen {
min-height: 100px;
border-radius: 1rem 1rem 0 0;
background-color: #ded3d3;
padding: 1rem;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 2rem;
}

/* Button container */
.button-container {
padding-top: 0.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
justify-content: space-between;  /* Attempt to add space between columns */
row-gap: 1rem; /* Space between rows */
text-align: center;
}

/* Buttons style */
.button-container button {
border-radius: 50%;
height: 3rem;
width: 3rem;
background-color: #ffcccc;
border: none;
font-size: 1.5rem;
cursor: pointer;
transition: background-color 0.3s;
}

.button-container button:hover {
background-color: #ffb3b3;
}

Проблема:
Сейчас у меня есть 4 столбца, заданных с помощью Grid-template-columns: restart(4, 1fr);, но мне нужно, чтобы пространство между столбцами было ровным, без дополнительного пространства на левом или правом краях сетки. Текущее значение justify-content: space-between;, похоже, не влияет на столбцы так, как я хочу.
Я хочу, чтобы между столбцами было одинаковое пространство, как и в пространстве между flexbox, при этом кнопки на левом и правом краях выровнены по краям контейнера.
Что Я пробовал:

• Я пробовал использовать justify-content: space-between; в .button-container, но с сеткой это не сработало должным образом.
• Я пробовал настроить свойство разрыва, но это не дает желаемого эффекта.

Что я хочу:
Я хочу, чтобы столбцы кнопок были равномерно расположены внутри сетки, а левый и правый края были выровнены по контейнеру. И я не хочу вручную добавлять пробел, вместо этого я хочу, сколько элементов должно быть в ряду, т. е. 4, и разрыв должен регулироваться автоматически.

Подробнее здесь: https://stackoverflow.com/questions/798 ... in-flexbox