Grid layout like pinterest using css only and without javascript : <p>I need a grid layout like Pinterest. How am I going to achieve such layout? </p>

<p>I tried using <code>flex</code> but each element has space and I want the grid layout like in Pinterest.</p>

<pre><code>&lt;style&gt;
    .flex{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flex-item{
        width: 20%;
        background: #dddddd;
    }
&lt;/style&gt;

&lt;div class="flex"&gt;
    &lt;div class="flex-item"&gt;content.....&lt;/div&gt;
    &lt;div class="flex-item"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit..&lt;/div&gt;
    &lt;div class="flex-item"&gt;Lorem ipsum dolor sit..&lt;/div&gt;
    &lt;div class="flex-item"&gt;Lorem ipsum dolor sit amet consectetur..&lt;/div&gt;
    &lt;div class="flex-item"&gt;Lorem ipsum..&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I really want the layout to be like pinterest I'm not sure if the flex is the practical way to achieve this. Any solution or advice will be much appreciated. Thanks in advance!</p>
