Почему сетка CSS распространяется на viewdith? ⇐ CSS

[Anonymous]

У меня есть игра в крестики-нолики, представленная CSS-сеткой.
Если я выберу «фиксированные» единицы измерения для столбцов, например пикселей или vw, сетка «расширяется» до ширины представления, как показано ниже через черную рамку. В настоящее время я понимаю или ожидаю, что сетка будет расширяться только до ширины трех столбцов, то есть около 300 пикселей, если нет полей, отступов и границ.

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

.tictactoe-board{
display:grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
border: 1px solid black;
}

.tictactoe-case{
background-color: red;
width: 100px;
height : 100px;
}

.tictactoe-case:hover{
background-color: red;
opacity: 60%;

}

.tictactoe-coin {
height: 5px;
width: 5px;
}

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

Если я предпочитаю использовать единицы измерения «fr», то сетка, очевидно, " останавливается» на трех столбцах, поскольку они занимают все место. Чего мне не хватает?

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

.tictactoe-board{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border: 1px solid black;
}

.tictactoe-case{
background-color: red;
height : 100px;
}

.tictactoe-case:hover{
background-color: red;
opacity: 60%;

}

.tictactoe-coin {
height: 5px;
width: 5px;
}

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

Подробнее здесь: https://stackoverflow.com/questions/791 ... o-viewdith