Responsive Square grid with HTML and CSS

Adding a  grid  with responsive square to our web page is simple than most of us think.

CSS

.container{    
    width: 100%;
    background: lightgray;    
    display: inline-block;
}

.container div {    
    float:left;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color: #1E1E1E;    
}

Adding a grid of div elements to a web page : CSS

Lets say we have a set of div elements and we want to display them in a grid. Most of people think it is an easy thing. Yes, it is easy, but trust me most of beginners in web developing get this wrong.

Here is an easier way to achieve that.

HTML

<div class="outer_container">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>