carolineartz
3/11/2015 - 4:09 AM

Understanding CSS Grid Systems // A Basic grid system for the article // Understanding CSS Grid Systems on SitePoint: // http://www.sitepoin

Understanding CSS Grid Systems // A Basic grid system for the article // Understanding CSS Grid Systems on SitePoint: // http://www.sitepoint.com/understanding-css-grid-systems

style.css
content_copyfile_download
/*------------------------------*\
    Grid System
\*------------------------------*/

.row, 
.column {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    position: relative;
    float: left;
    display: block;
}

.column + .column {
    margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}

.column-2 {
    width: 15.3333333333%;
}

.column-3 {
    width: 23.8%;
}

.column-4 {
    width: 32.2666666667%;
}

.column-5 {
    width: 40.7333333333%;
}

.column-6 {
    width: 49.2%;
}

.column-7 {
    width: 57.6666666667%;
}

.column-8 {
    width: 66.1333333333%;
}

.column-9 {
    width: 74.6%;
}

.column-10 {
    width: 83.0666666667%;
}

.column-11 {
    width: 91.5333333333%;
}

.column-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 550px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        float: none;
        width: auto;
    }
  
    .column + .column {
        margin-left: 0;
    }
}

/*------------------------------*\
    Styling
\*------------------------------*/

body {
    padding: 20px;
}

.column {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #777;
    padding: 5px;
    min-height: 30px;
    text-align: center;
}

.row {
    margin-bottom: 10px;
}

.row:last-child {
    margin-bottom: 0;
}

.column .column {
    color: #eee;
    background: #333;
    border-color: #000;
}

@media only screen and (max-width: 550px) {
    .row {
        margin-bottom: 0;
    }
    .column {
        margin-bottom: 10px;
    }
    .row:last-child .column:last-child {
        margin-bottom: 0;
    }
}
index.html
content_copyfile_download
<div class="row">
    <div class="column column-4"></div>
    <div class="column column-4"></div>
    <div class="column column-4"></div>
</div>
<div class="row">
    <div class="column column-2"></div>
    <div class="column column-4"></div>
    <div class="column column-4"></div>
    <div class="column column-2"></div>
</div>
<div class="row">
    <div class="column column-5"></div>
    <div class="column column-7"></div>
</div>
<div class="row">
    <div class="column column-6">
        <div class="row">
            <div class="column column-6"></div>
            <div class="column column-6"></div>
        </div>
        <div class="row">
            <div class="column column-3"></div>
            <div class="column column-3"></div>
            <div class="column column-3"></div>
            <div class="column column-3"></div>
        </div>
        <div class="row">
            <div class="column column-4"></div>
            <div class="column column-4"></div>
            <div class="column column-4"></div>
        </div>
    </div>
    <div class="column column-6">
        <div class="row">
            <div class="column column-7"></div>
            <div class="column column-3"></div>
            <div class="column column-2"></div>
        </div>
        <div class="row">
            <div class="column column-2"></div>
            <div class="column column-2"></div>
            <div class="column column-4"></div>
            <div class="column column-2"></div>
            <div class="column column-2"></div>
        </div>
        <div class="row">
            <div class="column column-9"></div>
            <div class="column column-3"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="column column-8"></div>
    <div class="column column-4"></div>
</div>
<div class="row">
    <div class="column column-1"></div>
    <div class="column column-3"></div>
    <div class="column column-4"></div>
    <div class="column column-3"></div>
    <div class="column column-1"></div>
</div>
<div class="row">
    <div class="column column-3"></div>
    <div class="column column-3"></div>
    <div class="column column-3"></div>
    <div class="column column-3"></div>
</div>
<div class="row">
    <div class="column column-12"></div>
</div>