I'm currently facing a challenge with a multi-column layout.
In a basic setup of three columns, I aim to adjust the padding so that each gap between the columns is consistent (2rem). However, the tricky part lies in crafting rules that can be applied to 2, 3, 4, or even 5 columns without any alterations.
Although I am using PureCSS for the multi-column structure, familiarity with this framework is not required as my issues are independent of it.
Here is the current 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 occupies 33.333% width. To create equal gaps between them, I plan to use an inner wrapper for each column, pushing the content away from the edges.
<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>
The .col-wrapper is given some padding, but finding a neat solution that works consistently across all column counts has been challenging. My initial approach:
.col > .col-wrapper {
padding-left: 1rem;
padding-right: 1rem;
}
/* Overwrite padding for precise left alignment */
.col:first-child > .col-wrapper {
padding-left: 0;
}
/* Overwrite padding for precise right alignment */
.col:last-child > .col-wrapper {
padding-right: 0;
}
However, with this CSS, the first and last columns end up with different sizes due to the varying padding.
I've made further adjustments in an attempt to achieve uniform gaps, which almost worked but introduced discrepancies in other areas.
.col > .col-wrapper {
padding-left: .67rem;
padding-right: .67rem;
}
/* Overwrite padding for precise left alignment */
.col:first-child > .col-wrapper {
padding-left: 0;
padding-right: 1.34rem;
}
/* Overwrite padding for precise right alignment */
.col:last-child > .col-wrapper {
padding-right: 0;
padding-left: 1.34rem;
}
Despite these efforts, I am currently at an impasse. How would you suggest adjusting the layout to achieve consistent gaps?
Thank you for your support :-)