こんにちは。

カテゴリーを表示する枠内で一行辺り3つずつ、
カテゴリーサムネイルとカテゴリー名がセットになったものを
動的に書き出したいのですが、最後の行にはmargin-bottomを付けたくありません。

その場合、どのようにhtmlとcssを組めば実現出来るのでしょうか？

============
■ 得たい結果
============

-------
■ ■ ■ < - margin-bottom:10px

■ ■ ■ < - margin-bottom:10px

■ ■ < - ★最後の行だけmargin-bottom:0pxにしたい！！
-------

* カテゴリの数だけ動的に<li>が書きだされる
* 一行あたり最大3つ画像とカテゴリ名がセットのliが並ぶ。
* 最後の行はliが1つのみになる場合もあるし3つになる場合もある。

======
■ html
======

<div id="category-section>

<ul>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>

<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>

<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
</ul>

</div>

======
■ CSS
======

ul {

width:100%;
padding:10px;
overflow:hidden; /*簡易clearfix*/

}

li {
margin-bottom:10px;
width:32%;
margin-right:2%
float:left;
}

/* 行の3つ目のliは右マージン0 */
li:nth-child(3n) {
margin-right:0;
}

/* 最後の行だけ下マージンを0にしたい！！ */

============
■ その他備考
============

一行単位で<div class="row">で囲って、最後の行のみmargin-bottomを0にしてあげるというので出来そうな気がするのですが、WPで3つずつ、別々の<div class="row">に3つずつ<li>を書き出すことが簡単に出来るのかどうかがわかりません。