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>

CSS

.outer_container{
                width: 330px;
                height: 600px;
            }           

            .outer_container div{
                width: 100px;
                height: 100px;
                outline: 1px solid;
                float: left;
                margin: 5px; 

            }

Here is how it displayed according to above code snippet