Grid system

As seen in the Toolbelt plugin Layout module https://wordpress.org/plugins/wp-toolbelt/

by Ben Gillbanks

HTML

<h1>2 columns</h1>
<div class="grid grid-col-2-0">
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-2-1">
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-2-2">
    <div class="col"></div>
    <div class="col"></div>
</div>

<h1>3 columns</h1>
<div class="grid grid-col-3-0">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-3-1">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-3-2">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-3-3">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-3-4">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-3-5">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

<h1>4 columns</h1>
<div class="grid grid-col-4-0">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-4-1">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-4-2">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-4-3">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="grid grid-col-4-4">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

SCSS

body {
    padding: 0 1rem;
}

.grid {
    display: grid;
    margin: 0 -10px 20px -10px;
    
    &-col-2-0 {
        grid-template-columns: 50% 50%;
    }
    &-col-2-1 {
        grid-template-columns: 25% 75%;
    }
    &-col-2-2 {
        grid-template-columns: 75% 25%;
    }

    &-col-3-0 {
        grid-template-columns: 33.33% 33.33% 33.33%;
    }
    &-col-3-1 {
        grid-template-columns: 25% 50% 25%;
    }
    &-col-3-2 {
        grid-template-columns: 50% 25% 25%;
    }
    &-col-3-3 {
        grid-template-columns: 25% 25% 50%;
    }
    &-col-3-4 {
        grid-template-columns: 16.66% 50% 33.33%;
    }
    &-col-3-5 {
        grid-template-columns: 50% 16.66% 33.33%;
    }
    
    &-col-4-0 {
        grid-template-columns: 25% 25% 25% 25%;
    }
    &-col-4-1 {
        grid-template-columns: 50% 16.66% 16.66% 16.66%;
    }
    &-col-4-2 {
        grid-template-columns: 16.66% 16.66% 16.66% 50%;
    }
    &-col-4-3 {
        grid-template-columns: 33.33% 16.66% 16.66% 33.33%;
    }
    &-col-4-4 {
        grid-template-columns: 16.66% 33.33% 33.33% 16.66%;
    }

}

.col {
    height: 100px;
    background: red;
    margin: 0 10px;
}