Equalizing horizontal column paddings at unknown number of columns - css

Question

I am struggling solving a problem with a multi-column setup.
Given a simple setup of three columns I want to adjust the padding so that each gap between the columns is of the same size (2rem). But, the tricky part: I want to be able to use the same rules for 2, 3, 4 or even 5 columns.
I am using PureCSS to create the multi-column setup itself. Knowledge of this framework should not be necessary though, as my problems don't have to do with it.
At the moment there is the 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 is of 33.333 % width, of course. To create the gap in between, my idea is to use an inner wrapper for each column, that pushes it's content away from the 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 I give the .col-wrapper some padding. But here's where I can't figure out a clean solution that works for all column counts. My idea is:
.col > .col-wrapper {
padding-left: 1rem;
padding-right: 1rem;
}
/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
padding-left: 0;
}
/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
padding-right: 0;
}
But given this CSS, the first and the last columns are always of different size than the rest, as they have 1rem less padding.
Next idea was, to adjust it a bit further and this is nearly perfect, but it causes the first/last and other gaps to differ.
.col > .col-wrapper {
padding-left: .67rem;
padding-right: .67rem;
}
/* Overwrite padding for an exact left alignment */
.col:first-child > .col-wrapper {
padding-right: 1.32rem;
padding-left: 0;
}
/* Overwrite padding for an exact right alignment */
.col:first-child > .col-wrapper {
padding-right: 0;
padding-left: 1.32rem;
}
And here I am stuck. How would you adjust it to create even gaps?
Thanks for your help :-)

Answer 1

I am using PureCSS to create the multi-column setup itself. Knowledge
of this framework should not be necessary though, as my problems don't
have to do with it.
Your problem is related to the use of purecss in that you are constraining yourself to finding a solution starting from columns set at fixed percentages.
You could easily achieve equal width columns without using purecss and 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 am not sure if there is a solution possible using the same rules for different number of columns while keeping with purecss. The percentage of padding for left, right, first-child and last-child would always be changing depending on the number of columns in use. But you could calculate it for each scenario and add css rules as applicable.