CSS Custom responsive Grids

The custom responsive grids can be used standalon or in combination with the autoresponsive grids. The idea is to use the same col system classes that have the autogrids but that will work only in custom devices. The name of the class is the same but including an acronym of the device. Check the following examples:

Device Acronym Class example
Mobile m .col-m-1-2
Phablet (Big mobile) p .col-p-1-2
Tablet t .col-t-1-2
Desktop d .col-d-1-2

Check the following example to a better understanding:

Desktop 4 columns, tablet 2 columns, Phablet (Big mobile) 2 columns, mobile 1 column

	                <div class="grid">
    <div class="col-d-1-4 col-t-1-2 col-p-1-2 col-m-1-1">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-4 col-t-1-2 col-p-1-2 col-m-1-1">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-4 col-t-1-2 col-p-1-2 col-m-1-1">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-4 col-t-1-2 col-p-1-2 col-m-1-1">
        <div class="box-darken">

        </div>
    </div>
</div>

                

When you combine custom grids, it's very common that they are not wrapped correctly inside "grid" layers. For this purposes you will need to setup the "grid" layer as "grid-custom" and also to add a class to identify is the last column in the desired device with the following classes:

Device Acronym Last col class
Mobile m .col-m-last
Phablet (Big mobile) p .col-p-last
Tablet t .col-t-last
Desktop d .col-d-last

Check the following example to a better understanding:

Desktop 5 columns, tablet 3 columns + 2 column, Phablet (Big mobile) 2 columns + 2 columns + 1 column, mobile 1 column

	                <div class="grid-custom">
    <div class="col-d-1-5 col-t-1-3 col-p-1-2">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-5 col-t-1-3 col-p-1-2 col-p-last">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-5 col-t-1-3 col-t-last col-p-1-2">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-5 col-t-1-2 col-p-1-2 col-p-last">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-d-1-5 col-d-last col-t-1-2 col-t-last col-p-1-1 col-p-last">
        <div class="box-darken">

        </div>
    </div>
</div>