JSFiddle - React, Tailwind, and code Playground

HTML

<script src="code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js"></script>
<body id="home">
    <div id="wrapper">
        <!-- the header and navigation -->
        <div id="header">
            <div id="navigation">
                <ul>
                    <li><a href="#">Navigation1</a>

                    </li>
                    <li><a href="#">Navigation2</a>

                    </li>
                </ul>
            </div>
        </div>
        <!-- the content -->
        <div id="content">
            <!-- Albums -->
            <p>Test</p>
            <div id="gallery_container">
                <ul>
                    <li>
                        <img src="https://farm4.staticflickr.com/3085/3240905063_d5284a3749_s.jpg" width="150" />
                    </li>
                    <li>
                        <img src="https://farm4.staticflickr.com/3426/3241736946_096ff5541c_s.jpg" width="150" />
                    </li>
                    <li>
                        <img src="https://farm4.staticflickr.com/3082/3332658225_e7512ce467_s.jpg" width="150" />
                    </li>
                    <li>
                        <img src="https://farm4.staticflickr.com/3349/3241736874_336cc6caf6_s.jpg" width="150" />
                    </li>
                    <li>
                        <img src="https://farm4.staticflickr.com/3136/2910414056_b79622666d_s.jpg" width="150" />
                    </li>
                    <li>
                        <img src="https://farm4.staticflickr.com/3099/2909566705_f327578425_s.jpg" width="150" />
                    </li>
                </ul>
            </div>
        </div>
        <!--Articles sidebar -->
        <div id="sidebar">
            <p>Sidebar</p>
        </div>
        <!-- the footer -->
        <div id="footer">
            <p>Footer</p>
        </div>
    </div>
</body>

CSS

#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%;
}
#header {
    margin-right: 1.0416667%;
    /* 10 div 960 */
    margin-left: 1.0416667%;
    /* 10 div 960 */
    width: 97.9166667%;
    /* 940 div 960 */
    background-color: #779307;
}
#navigation {
    padding-bottom: 25px;
    margin-top: 26px;
    margin-left: -1.0416667%;
    /* 10 div 960 */
    padding-right: 1.0416667%;
    /* 10 div 960 */
    padding-left: 1.0416667%;
    /* 10 div 960 */
    width: 97.9166667%;
    /* 940 div 960 */
}
#navigation ul li {
    display: inline;
    margin-right: 2.6595745%;
    /* 25 div 940 */
}
#navigation ul li a {
    height: 42px;
    line-height: 42px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, "Lucida Grande", Verdana, sans-serif;
    font-size: 27px;
    color: black;
}
#content {
    margin-top: 58px;
    margin-right: 1.0416667%;
    /* 10 div 960 */
    float: right;
    background-color: #dedede;
    width: 72.7083333%;
    /* 698 div 960 */
}
#sidebar {
    border-right-color: #e8e8e8;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 58px;
    padding-right: 1.0416667%;
    /* 10 div 960 */
    margin-right: 1.0416667%;
    /* 10 div 960 */
    float: left;
    width: 22.7083333%;
    /* 218 div 960 */
    background-color: #fe9c00;
}
#footer {
    float: left;
    margin-top: 20px;
    margin-right: 1.0416667%;
    /* 10 div 960 */
    margin-left: 1.0416667%;
    /* 10 div 960 */
    clear: both;
    width: 97.9166667%;
    /* 940 div 960 */
    background-color: #663300;
}
#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;
}

JavaScript

var columns;
$(document).ready(function () {

    $('#gallery_container').masonry({
        gutter: 12,
        itemSelector: '#gallery_container ul li img',
        columnWidth: 150,
        isFitWidth: true
    });
});