My Grid

by joplomacedo

HTML

<div class="row-3">
    <div class="col-1">dsadsad</div>
    <div class="col-2">asdasd</div>
</div>

<div class="row-4">
    <div class="col-1"><input type="text" /></div>
    <div class="col-2">jkl</div>
    <div class="col-1">asdasd</div>
</div>

<div class="row-2">
    <div class="col-1">dsadsad</div>
    <div class="col-1">asdasd</div>
</div>

<div class="row-4">
    <div class="col-1">dsadsad</div>
    <div class="col-1">jkl</div>
    <div class="col-1">jkl</div>
    <div class="col-1">asdasd</div>
</div>

CSS

*[class|="row"],
*[class|="col"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
}

*[class|="col"] {
    vertical-align: top;
    display: inline-block;
    border: 1px solid grey;
    padding: 0 10px;
    font-size: 14px;
}

*[class|="col"]:first-child {
    padding-left: 0;            
}

*[class|="col"]:last-child {
    padding-right: 0;
}

.row-2 .col-1 {
    width: 50%;
}

.row-3 .col-1 {
    width: 33.3333%;
}

.row-3 .col-2 {
    width: 66.6666%;
}

.row-4 .col-1 {
    width: 25%;
}

.row-4 .col-2 {
    width: 50%;
}

.row-4 .col-3 {
    width: 75%;
}