css - Equalizing horizontal column paddings at unknown number of columns -

i struggling solving problem multi-column setup.

given simple setup of 3 columns want adjust padding each gap between columns of same size (2rem). but, tricky part: want able use same rules 2, 3, 4 or 5 columns.

i using purecss create multi-column setup itself. knowledge of framework should not necessary though, problems don't have it.

at moment there following markup:

<div class="pure-g">   <div class="pure-u-1-3"><div class="myblock">content col 1</div></div>   <div class="pure-u-1-3"><div class="myblock">content col 2</div></div>   <div class="pure-u-1-3"><div class="myblock">content col 3</div></div> </div> 

each column of 33.333 % width, of course. create gap in between, idea use inner wrapper each column, pushes it's content away sides.

<div class="pure-g">   <div class="pure-u-1-3 col">     <div class="col-wrapper">       <div class="myblock">content col 1</div>     </div>   </div>    <div class="pure-u-1-3 col">     <div class="col-wrapper">       <div class="myblock">content col 2</div>     </div>   </div>    <div class="pure-u-1-3 col">     <div class="col-wrapper">       <div class="myblock">content col 3</div>     </div>   </div> </div> 

now give .col-wrapper padding. here's can't figure out clean solution works column counts. idea is:

.col > .col-wrapper {   padding-left: 1rem;   padding-right: 1rem; }  /* overwrite padding exact left alignment */ .col:first-child > .col-wrapper {   padding-left: 0; }  /* overwrite padding exact right alignment */ .col:first-child > .col-wrapper {   padding-right: 0; } 

but given css, first , last columns of different size rest, have 1rem less padding.

next idea was, adjust bit further , perfect, causes first/last , other gaps differ.

.col > .col-wrapper {   padding-left: .67rem;   padding-right: .67rem; }  /* overwrite padding exact left alignment */ .col:first-child > .col-wrapper {   padding-right: 1.32rem;   padding-left: 0; }  /* overwrite padding exact right alignment */ .col:first-child > .col-wrapper {   padding-right: 0;   padding-left: 1.32rem; } 

and here stuck. how adjust create gaps?

thanks :-)

i using purecss create multi-column setup itself. knowledge of framework should not necessary though, problems don't have it.

your problem related use of purecss in constraining finding solution starting columns set @ fixed percentages.

you achieve equal width columns without using purecss , use flexbox instead (see example http://codepen.io/imohkay/pen/gpard).

 <div class="equalhmwrap eqwrap">     <div class="equalhm eq">boo <br> boo</div>     <div class="equalhm eq">shoo</div>     <div class="equalhm eq">clue</div>  </div> 

css

.eqwrap {     display: flex; } .equalhmwrap {     justify-content: space-between; } .equalhm {     width: 32%; } 

i not sure if there solution possible using same rules different number of columns while keeping purecss. percentage of padding left, right, first-child , last-child changing depending on number of columns in use. calculate each scenario , add css rules applicable.