I'm just getting my head round dynamic layout for the first time, having coded fixed-sized sites up until now.

I want to have a neat grid of items (each will be a square image link with a caption on top) that display neatly in a horizontal line (ideally centred on the screen), which then wrap and start placing elements below when the screen gets smaller (so will appear in a column on a phone)

Will I need to use some jQuery grid plugin for this? Most seem to aim at grid that support dynamically sizing content, but I'm happy for my containers to be fixed size.

I've tried starting the elements off with html like this:
<div class="sq_link_box">
<div class="sq_link_img"><img src="images/practice/news/01-p.jpg></div>
<div class="sq_link_text">Text 01</div>
<div class="sq_link_box">
<div class="sq_link_img"><img src="images/practice/news/02-p.jpg></div>
<div class="sq_link_text">Text 02</div>
<div class="sq_link_box">
<div class="sq_link_img"><img src="images/practice/news/03-p.jpg></div>
<div class="sq_link_text">Text 03</div>
Then my CSS is this:
.sq_link_box {
	display: inline;
	margin: 1em;
	background: #AAA;
	width: 300px;
	height: 300px;
	position: relative;

.sq_link_img {
	margin: 0;
	z-index: 1;

.sq_link_text {
	width: 280px;
	height: 30px;
	top: -50px;
	background: #272727;
	color: #fff;
	position: relative;
	z-index: 2;
	padding: 10px;
For some reason, they all appear in a column from the start, even though I've specified 'inline' for the container element. Any ideas why it's not working? And if there's a simple way of achieving this? Any help gratefully received!!