デモページはこちら

3カラムで複数行のコンテンツの両側にCSSで角丸を設定します。コンテンツ数は可変の前提で、部分的に2カラムや1カラムになった時のパターンも考えていきます。

htmlの構造は以下の通りです。デモページではクラス名boxのliタグを6個、5個、4個の場合でそれぞれ確認します。

<ul class="container">
	<li class="box">
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</li>
	<li class="box">
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</li>
	<li class="box">
		<p>ダミーテキストダミーテキストダミーテキスト</p>
	</li>
</ul>

CSSはまずコンテンツ数6個の場合を考えていきます。1カラム目の:nth-child(3n + 1)の左側と3カラム目の:nth-child(3n)の右側に角丸を設定します。

.box:nth-child(3n + 1) {
	border-radius: 10px 0 0 10px;
}
.box:nth-child(3n) {
	border-radius: 0 10px 10px 0;
}

次にコンテンツ数5個の場合を考えていきます。最後の行が2カラムになり、現状は5個目のコンテンツに角丸が設定されていません。そこで最後のコンテンツのみ右側に角丸を設定します。

.box:last-child {
	border-radius: 0 10px 10px 0;
}

最後にコンテンツ数4個の場合を考えていきます。最後の行が1カラムになり、4個目のコンテンツは左側にのみ角丸が設定されています。ですが、4個目のコンテンツは最後のコンテンツでもあるため、CSSで後に記述した右側のみの角丸が有効になっています。

ここでnth-childとlast-childの複合条件を利用します。1カラム目のコンテンツでなおかつ最後のコンテンツである場合、両側に角丸を設定します。

.box:nth-child(3n + 1):last-child {
	border-radius: 10px;
}

これで、3カラム複数行でコンテンツ数可変であっても、コンテンツの両側にCSSで角丸を設定することができます。