Мои размеры сетки CSS меняются при изменении своих детских элементов размер шрифта ⇐ CSS

[Anonymous]

Я пытаюсь создать меню 3x3 в HTML /CSS с дисплеем: Grid.
Некоторые квадраты в моем меню должны быть большими плюсами, поэтому я пытался изменить размер шрифта этих плюсов, это, однако, изменило размеры моей сетки, и все квадраты больше не равны друг другу. /> Я попытался посмотреть это некоторое время, но я не могу понять это, и я не очень знаком с сети и CSS в целом, поэтому я бы очень понравился от кого -либо, большое спасибо!





Testing







X


X


X


+


+


+


X


X


X








< /code>
css: < /p>
* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
}

main {
margin: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}

.square {
border: solid 1px black;
}
.square>div {
margin: auto;
width: max-content;
height: max-content;
position: relative;
top: calc(50% - 1em);
font-size: 16px;
}
.plus>div {
/* The line that causes trouble when commenting/uncommenting */
font-size: 80px;
}
< /code>
изображение результата
Надеюсь, этот вопрос хороший, заранее спасибо за вашу помощь! < /p>

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