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 */ } 

js fiddle demo.

references:


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -