Faux Height Columns

A scss / css3 way for equal height columns with adjustable column gaps and column amount.

by Randolf Mayerbuch

HTML

<!-- THE HTML MARKUP -->
            <div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

SCSS

/* THE SCSS */

$myClass: '.fauxer'; // Change your fauxer class
$colgap: 20px; // Change value for gap width
$colset: 5; // Change number of used cols

/* Don't touch these 2 variables ;) */
$strip: $colgap * -1;
$dgap: $colgap *2;

#{$myClass} * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

#{$myClass} { overflow: hidden; }

#{$myClass}>div {
    display: table;
    border-spacing: $colgap;
    margin: $strip auto $strip $strip;
    width: -webkit-calc(100% + #{$dgap});
    width: -moz-calc(100% + #{$dgap});
    width: calc(100% + #{$dgap}); }

#{$myClass}>div>div { display: table-row; }
#{$myClass}>div>div>div {
    display: table-cell;
    width: 100% / $colset;
    padding: 20px; // Change for padding
    border: thin solid #000; }


/* Optional Mediaqueries */
@media only screen and (max-width: 600px) {
    #{$myClass}>div>div>div {
        display: block;
        width: 100%;
        margin-bottom: $colgap; // Change for vertical gap 
        }
}