CSS Grid с равномерно распределенными ячейками для настольной игры (квадрат) ⇐ CSS

[Anonymous]

Я пытаюсь создать простой пользовательский интерфейс настольной игры, используя сетку CSS. Я предполагал, что это идеальный инструмент для этой цели, однако мне не удалось добиться желаемых результатов, а именно:
1 — плитки автоматически изменяют размер так, чтобы они заполняли родительский элемент
2 – Соотношение сторон плиток будет поддерживаться 1:1.
3 – Содержимое страницы НЕ должно выходить за пределы видимого окна браузера.
К сожалению, все решения, которые я использовал, до сих пор пробовал либо вызывает переполнение, либо страница расширяется по горизонтали, когда ширина каждой плитки становится слишком большой.

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

:root
{
--col_and_row_count: 10;
}

.main
{
display: grid;
grid-template-rows: 60px 1fr 60px;
gap: 1em;
height: 100vh;
}

.wrapper
{
display: grid;
grid-template-columns: 200px 1fr;
}

.board
{
display: flex;
align-items: center;
}

.tiles
{
margin: auto;
display: grid;
grid-template-columns: repeat(var(--col_and_row_count), 1fr);
gap: 12px;
aspect-ratio: 1;
}

.tiles >  div
{
background:  g r e e n ; < b r   / >                               < b r   / >                 } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e >   & l t ; d i v   c l a s s = " m a i n " & g t ; < b r   / > < b r   / >                 & l t ; d i v & g t ; < b r   / >                         S o m e   h e a d i n g   t e x t   g o e s   h e r e < b r   / >                 & l t ; / d i v & g t ; < b r   / > < b r   / >                 & l t ; d i v   c l a s s = " w r a p p e r " & g t ; < b r   / > < b r   / >                         & l t ; d i v & g t ; < b r   / >                                 T h e   s i d e   b a r   g o e s   h e r e < b r   / >                         & l t ; / d i v & g t ; < b r   / > < b r   / > < b r   / >                         & l t ; d i v   c l a s s = " b o a r d " & g t ; < b r   / > < b r   / >                                 & l t ; d i v   c l a s s = " t i l e s " & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 0 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 3 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 4 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 5 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 6 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 7 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 8 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 9 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 0 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 1 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 2 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 3 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 4 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 5 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 6 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 7 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 8 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 1 9 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 0 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 1 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 2 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 3 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 4 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 5 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 6 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 7 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 8 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 2 9 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 3 0 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 3 1 " & g t ; & l t ; / d i v & g t ; < b r   / >                                         & l t ; d i v   d a t a - t i l e - i n d e x = " 3 2 " & g t ; & l t ; / d i v >








This is the footer

Подробнее здесь: https://stackoverflow.com/questions/783 ... ame-square