How would you center in X and Y a div element within a cell generated with CSS Grid?
I have a 9x9 Grid and each cell has a <div class="tic-box">.
If I inspect the element in Firefox with the grid guides enabled, I can see that the divs are top-left positioned. I tried align-self, justify-self and such as per MDN instructions with no luck.
I know it's almost unnoticeable:
...but I want it to be perfect because it shows in certain viewports.
I have the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>
</head>
<body>
<div class="site">
<nav> TIC TAC TOE </nav>
<div class="tic-board">
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
<div class="tic-box">?</div>
</div>
</div>
</body>
</html>
And this CSS (btw I'm using just a bit of SASS):
body {
margin: 0;
padding: 0;
background: url("../img/patterns/background.png") repeat;
}
.site{
display: grid;
}
nav{
grid-area: nav;
}
.tic-board{
grid-area: brd;
display: grid;
}
.tic-box{
text-align: center;
}
@media(max-width: 400px) {
.site{
grid-template-columns: repeat(6, 16.66666666666666667%);
grid-template-rows: 5vh 50vh 20vh 20vh 5vh;
grid-template-areas:
"nav nav nav nav nav nav"
". brd brd brd brd ."
"pnl pnl pnl pnl pnl pnl"
"ads ads ads ads ads ads"
"ftr ftr ftr ftr ftr ftr";
}
nav{
}
.tic-board{
$sz: 16.666666666666666666666667vw;
grid-template-columns: $sz $sz $sz;
grid-template-rows: $sz $sz $sz;
line-height: $sz;
grid-gap: .5vw;
margin: auto;
}
.tic-box{
width: 100%;
align-self: center;
justify-self: center;
}
}
I appreciate your help.
