attribute selector
select all the elements where the class attributs start with
col-
eg: class*="col-" select all the element which has a class
which contains col-
eg: class$= select all the elements where the class attributs end
with col-


<section class="grid-test">
        <div class="row">
            <div class="col-1-of-2">
                col 1 of 2
            </div>
            <div class="col-1-of-2">
                col 1 of 2
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-3">
                col 1 of 3
            </div>
            <div class="col-1-of-3">
                col 1 of 3
            </div>
            <div class="col-1-of-3">
                col 1 of 3
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-3">
                col 1 of 3
            </div>
            <div class="col-1-of-3">
                col 2 of 3
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-1-of-4">
                col 1 of 4
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-1-of-4">
                col 2 of 4
            </div>
        </div>
        <div class="row">
            <div class="col-1-of-4">
                col 1 of 4
            </div>
            <div class="col-3-of-4">
                col 3 of 4
            </div>
        </div>
    </section>