I'm trying to build a very simple grid layout that should show some containers, aligned like so:
The screenshot is from Chromium, which seems to be working as intended. If I activate the grid inspector, I can see the row tracks laid out as expected:
This screenshot is from Firefox:
Here's a screenshot of the grid inspector:
The middle tracks seem... compressed.
I found this Firefox bug, not sure if it's related.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div align="center" id="container">
<div id="helpContainer">
<div>H E L P</div>
<div>J: left</div>
<div>K: rotate</div>
<div>L: right</div>
<div>space: drop</div>
</div>
<div id="gameContainer">
</div>
<div id="speedContainer">
<div>S P E E D</div>
<span id="current-speed">0</span>
</div>
<div id="scoreContainer">
<div>S C O R E</div>
<div>
<span>Best:</span>
<span id="high-score"></span>
</div>
<div id="score">
<span>Current:</span>
<span id="current-score">0</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#gameContainer, #scoreContainer, #helpContainer, #speedContainer {
border: 1px solid #000000;
}
#container {
display: grid;
grid-template-columns: 35% 30% 35%;
grid-template-rows: 20% 30% 30% 20%;
justify-items: center;
align-items: center;
}
#helpContainer {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
}
#gameContainer {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5;
width: 500px;
height: 900px;
}
#speedContainer {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
#scoreContainer {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
