How to size each square the same???
Preview Issue on JSBIN | View Issue Code on JSBIN
I am using flexbox to create a grid layout. Most grid cells do not have content and some grid cells do have content. When a cell has content it throws everything off. how can I make sure all cells are even regardless of content?
HTML
I have three rows, each with three cells. Only the center row of the center cell contains children.
<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
In the css the center space is larger than the other squares.
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;
}