How to ensure uniform size for all grid cells?
Check out the issue on JSBIN | See the code on JSBIN
I'm utilizing flexbox to construct a grid layout. Some cells in the grid have content while others are empty, causing inconsistencies in cell sizes. What's the best approach to make all cells evenly sized regardless of their content?
https://i.sstatic.net/slELk.png
HTML
The structure consists of three rows, each containing three cells. Only the center cell in the middle row has children elements.
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div><span>contains span</span></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
CSS
The center cell is currently larger than other cells due to CSS styling.
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
body>div {
display: flex;
}
body>div>div {
border: solid 1px blue;
}
div {
flex-grow: 1;
}
body>div:nth-child(2)>div:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
}