CSS Autoresponsive Grids

This grids works automatically with all resolutions. Resize the window to check the behaviour.

1 Column

	                <div class="grid">
	<div class="col-1-1">
		<div class="box-darken">

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

2 Columns

	                <div class="grid">
	<div class="col-1-2">
		<div class="box-darken">

		</div>
	</div>
	<div class="col-1-2">
		<div class="box-darken">

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

3 Columns

	                <div class="grid">
    <div class="col-1-3">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-3">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-3">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-2-3">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-3">
        <div class="box-darken">

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

4 Columns

	                <div class="grid">
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-2-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-3-4">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-4">
        <div class="box-darken">

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

5 Columns

	                <div class="grid">
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-2-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-3-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-4-5">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-5">
        <div class="box-darken">

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

12 Columns

	                <div class="grid">
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-2-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-3-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-4-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-5-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-6-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-7-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-8-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-9-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-10-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

        </div>
    </div>
</div>
<div class="grid">
    <div class="col-11-12">
        <div class="box-darken">

        </div>
    </div>
    <div class="col-1-12">
        <div class="box-darken">

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