GRID noname responsive

by Alex

HTML

<div class="grid">
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-2</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-2</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_1-4 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-4</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_1-4 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-4</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_1-2 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-2</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_1-3 grid-md-cl_1-3">
        <div class="box">
            <span class="hide-md">1-3</span>
            <span class="hide-sm">1-3</span>
        </div>
    </div>
    <div class="grid-cl_2-3 grid-md-cl_1-2">
        <div class="box">
            <span class="hide-md">2-3</span>
            <span class="hide-sm">1-2</span>
        </div>
    </div>
    <div class="grid-cl grid-md-cl_1-2">
        <div class="box">
            <span class="hide-md">1-1</span>
            <span class="hide-sm">1-2</span>
        </div>
    </div>
</div>

CSS

html {
	font-family: sans-serif;
}
.box {
    background: #eee;
    padding: 5px;
    border: 1px solid #aaa;
}
.grid {
	letter-spacing: -.28em;
    margin: -15px 0 0 -15px;
}
[class^=grid-cl] {
    padding: 15px 0 0 15px;
    
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	box-sizing: border-box;
}
.grid-cl {
	width: 100%;
}
.grid-cl_1-2 {
	width: 50%;
}
.grid-cl_1-3 {
	width: 33.33%;
}
.grid-cl_2-3 {
	width: 66.66%;
}
.grid-cl_1-4 {
	width: 25%;
}
.grid-cl_3-4 {
	width: 75%;
}
@media (max-width: 1200px) {
    .hide-sm {
        display: none;
    }
}
@media (min-width: 1200px) {
    .hide-md {
        display: none;
    }	
    .grid-md-cl {
		width: 100%;
	}
	.grid-md-cl_1-2 {
		width: 50%;
	}
	.grid-md-cl_1-3 {
		width: 33.33%;
	}
	.grid-md-cl_2-3 {
		width: 66.66%;
	}
	.grid-md-cl_1-4 {
		width: 25%;
	}
	.grid-md-cl_3-4 {
		width: 75%;
	}
}