１ページに表示する記事数の設定

Webページ作成に関するプログラミングに少しだけ触れている初心者です。
個人ブログ作成の練習をしています。大枠としては、１カラムで上からheader,content,footerとし、content部分に投稿した記事をグリッドで横３×縦４の計１２個（更新順）表示させ、それ以前の記事は「次のページへ」などで２ページ目以降に表示させたいと思ってます。
グリッドで横３×縦複数行記事を投稿することはできるようになりましたが、それだと延々HPに投稿記事が連なってしまいます。
そこで上記のとおり１ページに表示する記事数の設定をしたいのですが、何から手を付けていいのか分からず困惑しています。
どなたかお力をお貸しいただきますようお願い申し上げます。

「HTML」

<div class="header"> <h1><a href="">Hello World</a></h1> </div>

<div class="contents">
<div class="entry">
	<h2>CONTENTS</h2>
	<div class="grid">
		<h3>タイトル１</h3>
		<p>横幅<b>960px</b>の親要素
		<b>container</b>の中心に横幅<b>300px</b><small>(<b>margin10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
	</div><!-- grid -->

	<div class="grid">
		<h3>タイトル２</h3>
		<p>横幅<b>960px</b>の親要素
		<b>container</b>の中心に横幅<b>300px</b><small>(<b>margin10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
	</div><!-- grid -->

	<div class="grid">
		<h3>タイトル３</h3>
		<p>横幅<b>960px</b>の親要素
		<b>container</b>の中心に横幅<b>300px</b><small>(<b>margin10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
	</div><!-- grid -->


</div><!-- container -->
</div><!-- contents -->


<div id="footer">
	<p>Copyright 2015</p>
	<p>Powered by TOOLS</p>
</div>

</body> </html>

「CSS」

.header{
height: 280px;
padding: 50px 20px 20px 20px;
-webkit-box-sizing: border-box;
background-color: #dfe3e8;
background-image: url('header.jpg');
background-position: 68% 63%;
background-size: cover;
}

.header h1{
margin: 0;
font-size: 40px;
line-height: 1;
}

.header h1 a{
color: white;
text-decoration: none;
}
/* contents */
.contents {
width: 960px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
background: ;
min-height: 500px;/サンプル用に高さ設定してあります。/
}
.contents h2 {
color: pink;
text-align: center;
}