I want to write 2048 game using divs and css-grid. This is how I imagine the output:
I have the outer part, which fits to the browser window, and I just want to write 4x4 grid in the middle (horizontal and vertical) of the middle-left div (called 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>I made a 4x4 grid using:
div.game { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
}However, I have a problem with few things:
- How to make each
game-cellsquare (lets say 50px) - How to display a number in the middle of a
game-cell - How to make divs touch each other
I can make each one of this, but not all at once.
Moreover, how to display game div in the middle (as in the picture) of the game-container div.
PS. I don't mind using some Bootstrap if it simplifies something.
Some info concerning outer container:
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;
}3 Answers
use flexbox to acheive it outside grid.
div.game { display: grid; width: 50vw; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 120px; height: 120px
}
.game-cell { width: 30px; height: 30px; border: 1px solid ; box-sizing: border-box;
}
.left-half{ width: 50vw; height: 100vh; border: 1px solid red; display: flex; align-items: center; justify-content: center;
}
body{ padding: 0; margin: 0;
}<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title>
</head>
<body>
<div class = "game-container"> <div> <div class = "game"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
</div>
</body>
</html>Add this to your .game-container css
display: flex; align-items: center; justify-content: center;.game { display: grid; width: 120px; height: 120px; border:1px solid black;
}
.game-container{ height: 500px; width: 500px; display: flex; align-items: center; justify-content: center; border: 1px solid black;
}<div class = "game-container"> <div class = "game"> </div>
</div>Here is the complete solution combined using answers and comments from comunity.
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;
}
div.container > div { background-color: #99c2ff;
}
div.header { grid-column: 1/3; grid-row: 1/2;
}
div.game-container { display: flex; grid-column: 1/2; grid-row: 2/3; text-align: center;
}
div.menu { grid-column: 2/3; grid-row: 2/3;
}
div.footer { grid-column: 1/3; grid-row: 3/4;
}
div.game { display: grid; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(4, 80px); margin: auto;
}
div.grid-cell { display: flex; border: 1px solid rgba(0, 0, 0, 0.8); font-size: 20px; background-color: #e6f0ff;
}
div.value-cell { margin: auto;
}
h1, h2, h3, h4 { text-align: center;
}<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="styles.css"> <title>2048</title> </head> <body> <div> <div> <h3>Title</h3> </div> <div class = "game-container"> <div class = "game"> <!-- <div> --> <div><div></div></div> <div><div></div></div> <div><div></div></div> <div><div></div></div> <!-- </div> --> <!-- <div> --> <div><div></div></div> <div><div>2</div></div> <div><div></div></div> <div><div></div></div> <!-- </div> --> <!-- <div> --> <div><div></div></div> <div><div></div></div> <div><div>16</div></div> <div><div></div></div> <!-- </div> --> <!-- <div> --> <div><div></div></div> <div><div></div></div> <div><div>1024</div></div> <div><div></div></div> <!-- </div> --> </div> </div> <div> <p>Some info</p> </div> <div> <h4>Footer</h4> </div> </div> </body>
</html>
