How to arrange images as a grid with variable number of columns?
<p>I currently have an HTML page that contains images and some text in a vertical sequential order.</p>

<pre><code>&lt;div&gt;
 &lt;img src="img/img1.jpg"/&gt;
 Dr. XYZ
&lt;/div&gt;

&lt;div&gt;
 &lt;img src="img/img1.jpg"/&gt;
 Dr. XYZ
&lt;/div&gt;

&lt;div&gt;
 &lt;img src="img/img1.jpg"/&gt;
 Dr. XYZ
&lt;/div&gt;
</code></pre>

<p>What I am trying to do is to arrange the images into grids. I know I can use tables with two columns if I want to create the grid with two columns.</p>

<p>However, I do not want to hard-code this? Is there an alternate way using Javascript/CSS only to have a bunch of <code>div</code>s and then arrange them as a grid with arbitrary number of columns so that I don't have to restructure the whole page every time I want to change the number of grids.</p>
