Я хочу написать 2048 игру, используя div и css-grid. Вот как я представляю вывод:
У меня есть внешняя часть, которая подходит к окну браузера, и я просто хочу написать сетку 4x4 в середине (по горизонтали и вертикали) в середине левого div (называемого game-container)
<div class = "game-container">
<div class = "game">
<div class = "game-cell"></div>
<!-- 16 game cells total -->
<div class = "game-cell"></div>
</div>
</div>
Я сделал сетку 4х4, используя:
div.game {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
Однако у меня проблема с несколькими вещами:
- Как сделать каждый
game-cell квадрат (скажем, 50px)
- Как отобразить число в середине
game-cell
- Как сделать так, чтобы div касались друг друга
Я могу сделать все это, но не все сразу.
Более того, как отобразить game div в середине (как на картинке) game-container div.
PS. Я не против использовать Bootstrap, если он что-то упрощает.
Некоторая информация относительно внешнего контейнера:
html, body, div.container{
height: 100%;
margin: 0;
padding: 0;
}
div.container {
display:grid;
grid-template-rows: 3fr 9fr 2fr;
grid-template-columns: 3fr 5fr;
grid-gap: 2px;
background-color: yellow;
}