使用CSS网格的垂直和水平居中的4x4方形网格
我想使用 div 和 css-grid 编写 2048 游戏。这就是我想象的输出：
我有适合浏览器窗口的外部部分，我只想在中左 div （称为 ）的中间（水平和垂直）写入 4x4 网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>
我使用以下方法制作了 4x4 网格：
div.game {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
但是，我有一些问题：
- 如何制作每个
game-cell正方形（假设为 50px） - 如何在a的中间显示一个数字
game-cell - 如何让div相互接触
我可以每一项都做，但不能一次全部做。
另外，如何game在div的中间显示div（如图）game-container。
附言。如果它可以简化某些事情，我不介意使用一些 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;
}
Fal*_*art -1
这是结合了社区的答案和评论的完整解决方案。
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 class="container">
<div class="header">
<h3>Title</h3>
</div>
<div class = "game-container">
<div class = "game">
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">2</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">16</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
<!-- <div class="grid-row"> -->
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<div class="grid-cell"><div class="value-cell">1024</div></div>
<div class="grid-cell"><div class="value-cell"></div></div>
<!-- </div> -->
</div>
</div>
<div class="menu">
<p>Some info</p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>