 <p><a href="http://codepen.io/anon/pen/OVWpvO" rel="nofollow">http://codepen.io/anon/pen/OVWpvO</a></p> <p>html</p> <pre><code>&lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; &lt;img src="http://placehold.it/350x150"&gt; </code></pre> <p>css</p> <pre><code>body {text-align: center;} img { width: 20%; margin: 10px; } @media (max-width: 1280px) { img {width: 30%;} } @media (max-width: 980px) { img {width: 45%;} } @media (max-width: 768px) { img {width: 70%;} } </code></pre> <p>or css using calc();</p> <pre><code>body {text-align: center; margin: 0;} img { margin: 10px; width: calc(100%/4 - 4*6px); } @media (max-width: 1280px) { img {width: calc(100%/3 - 3*8px);} } @media (max-width: 980px) { img {width: calc(100%/2 - 2*11px);} } @media (max-width: 768px) { img {width: calc(100%);} } </code></pre> <p><a href="http://codepen.io/anon/pen/oXBZPL" rel="nofollow">http://codepen.io/anon/pen/oXBZPL</a></p>