Responsive square elements

Responsive grid, 3 columns and 3 rows of square elements with tex, list images...

by Laxmikant Dange

HTML

<div class="stretchy-wrapper">
   <div id="inner">
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">
                            98%
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
        </div>
        <div class="square">
            <div class="content">
                <div class="table">
                    <div class="table-cell numbers">               
                        3.9/5
                    </div>
                </div>
            </div>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
    
}
.table{
    display:table;
    width:100%;
    height:100%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}