Multiple Columns with Equal Spacing

by Michael Mandarino

HTML

<h1>Multiple Columns with Equal Spacing - v1.0</h1>
<h2>Last Update: August 10th 2017 by Michael Mandarino</h2>

<div class="row">
    <div class="col">
        Cols 3 - Custom Width
    </div>
    <div class="col custom-width">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 1
    </div>
</div>
<div class="row">
    <div class="col">
        Cols 2
    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 3
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 4
    </div>
    <div class="col">
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 5
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 6
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 7
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 8
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>
<div class="row">
    <div class="col">
        Cols 9
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div...

SCSS

/* Base Styles */

*,
*:after,
*:before {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 16px;
	padding: 0.5em;
}

h1 {
	color: #61bb46;
    font-size: 2em;
}

h2 {
    font-size: 0.75em;
    margin-bottom: 1em;
}


/* Main Styles */

.row {
    display: -ms-flexbox;
	display: -webkit-flex;
    display: flex;
	-ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-bottom: 1rem;
	
    > .col {
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		background-color: #61bb46;
        border: 8px solid #00afba;
		color: #fff;
        margin: 0 1em;
        min-height: 25px;
		padding: 1em;
		
        &:first-of-type {
            margin-left: 0;
        }
		
        &:last-of-type {
            margin-right: 0;
        }
    }
	
    > .col.custom-width {
    	-ms-flex: 0 0 50%;
		-webkit-flex: 0 0 50%;
        flex: 0 0 50%; // %, px, em, etc. 
    }
}