cssのgrid指定で最後のセルを結合状態にする

OBATA

43分前

レスポンシブで変形させるときに、少々考えを巡らせるのがテーブル構成です。
例えばＰＣで、写真等を4列構成で表示する場合、スマホだと1列か2列構成に変形します。

そういったケースで役に立つのがスタイルシートのgrid指定です。
tableタグのように表組にでき、またtableタグとは異なりスタイルシートだけで列数を指定できます。
レスポンシブとの親和性がとても高い指定です。

ただ今回、ちょっと疑問に思うことがありました。
それは、セル結合はどうすればよいのだろう?

という点です。

tableタグならば、簡単にセル結合できますが、gridタグでそんなことできるのだろうか?
そう思い調べてみました。

今回やりたいこと

テーブルの端数が出た場合に、最後のセルを、セル結合状態にします。

とりあえずやってみたものがこちら

とりあえずセルを結合してみたものがこちらです。

ソースはこちら

最後のliをセル結合にしています。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>gridでテーブル</title>
<style type="text/css">
*
{
	box-sizing: border-box;
}

.box 
{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

ul
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
	row-gap: 20px;
	align-items: stretch;
	margin: 0px;
	padding: 0px;
}

ul li
{
	margin: 0px;
	padding: 20px;
	list-style-type: none;
	border: 1px solid #000;
	text-align: center;
}

ul li:last-child
{
	grid-column: 1 / span 2;
}



</style>
</head>

<body>

<div class="box">

<ul>
<li>1個目</li>
<li>2個目</li>
<li>3個目</li>
</ul>

</div>
</body>
</html>

セル結合の理屈

以下の記述でgrid指定でセル結合状態になっています。

ul li:last-child
{
	grid-column: 1 / span 2;
}

意味は以下の通りです。

grid-column:	該当箇所の列の形を指定する
1	該当のタグ開始位置を1列目にする。 2を指定すると、2列目から配置される。
span 2	2セル分結合する。 span 3にすると、3セル分結合になる。

ですがこのままだと落とし穴がありました。

セル結合としてはこれでよいのですが、応用で考えると問題がありました。
liタグを4個にした場合です。
以下のような崩れた配置になりました。

何とかするためには、最後が奇数の場合と、偶数の場合で処理を分ける

原因は最後のliタグが奇数の場合と、偶数の場合とで処理を変える必要があるためです。
liタグの数が偶数の場合は、セルを結合する必要がありません。
liタグの数が奇数の場合は、最後のliタグを結合する必要があります。

奇数の場合だけセル結合するために、セル結合部分を以下の記述に書き換えます。

ul li:last-child:nth-child(odd)
{
	grid-column: 1 / span 2;
}

最後のliタグが奇数の場合という意味になります。
これに帰ると以下のようになりました。

応用するとこんな形にもできます

今回は2列構成ですが、応用すると以下のように複数列構成でもできます。

この例のソース

この例のソースは以下の通りです。
liタグが4個の場合、5個の場合、6個の場合で挙動が変わります。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>gridでテーブル</title>
<style type="text/css">
*
{
	box-sizing: border-box;
}

.box 
{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}

ul
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 20px;
	align-items: stretch;
	margin: 0px;
	padding: 0px;
}

ul li
{
	margin: 0px;
	padding: 20px;
	list-style-type: none;
	border: 1px solid #000;
	text-align: center;
}

ul li:last-child:nth-child(3n+1)
{
	grid-column: 1 / span 3;
}

ul li:last-child:nth-child(3n+2)
{
	grid-column: span 2;
}


</style>
</head>

<body>

<div class="box">

<ul>
<li>1個目</li>
<li>2個目</li>
<li>3個目</li>
<li>4個目</li>
<li>5個目</li>
</ul>

</div>
</body>
</html>

これをさらに応用すれば、4列構成、5列構成でも同様のことができます。

HTMLコーディングは年々複雑化しています

ホームページという物ができたころは、コーディングはほとんどhtmlタグだけで完結し、スタイルシートは色を付ける程度でした。

それが今や、レイアウト、配列、構成、余白、レスポンシブなどあらゆるものをスタイルシートで作成するように変わりました。

HTMLタグ自体は、昔とさほど変わっていませんが、スタイルシートはものすごく進化しています。
それに伴い、記述方法が複雑化し手間がかかるものに変化しています。

HTMLコーディング作業は、実感ですが昔と比べ倍以上の作業になった感じがします。
webという分野は、本当に日々進化していることを感じます。