css - Evenly spaced grid dynamic content -
i'm going have grid of <div>
s dynamically generated. each <div>
same width. want evenly space them across container. , want them space 3 across, , start again on next line. however, final row may have 1 or 2 <div>
s in it, need remain in same 'grid spacing' above rows.
basically, want table type spacing, without using tables :)
here's example html. below occur on 4 rows, final row having 1 item
<div id='container> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> <div class='item'>content</div> </div>
css:
div#container { width:600px; } div.item { width:180px; }
i had tried method @ bottom of this page fails when there's 2 items in row, because puts second item way right
i'd suggest following:
.item { float: left; width: 33%; /* 100 divided many items per row */ box-sizing: border-box; /* include border dimensions (if any) */ } /* in defined width of element */ .item:nth-child(odd) { background-color: #aaa; /* aesthetics, see individual items */ }
references: