Given 9 divs one after another, I want to create a grid 3X3 via CSS.
How do I do that?
.cell { height: 50px; width: 50px; background-color: #999; display: inline-block;}.cell:nth-child(3n) { background-color: #F00; /* what property should I use to get a line break after this element? */}/* this doesn't work; at least not in safari */.cell:nth-child(3n)::after { display: block;}<div class="grid"><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>Note: I don't want float/clear solution. Focus is on CSS and not HTML restructure.
If I add content: '\A'; white-space: pre; to ::after output comes out to be ugly.
.cell { height: 50px; width: 50px; background-color: #999; display: inline-block;}.cell:nth-child(3n) { background-color: #F00; /* what property should I use to get a line break after this element? */}.cell:nth-child(3n)::after { display: inline; content: '\A'; white-space: pre;}<div class="grid"><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>How do I go about getting all div in a 3X3 row-column layout?