段組みしたコンテンツを階段状にずらして並べるレイアウトってありますよね。

目線を誘導したりするのに便利なので僕もたまに使うのですが、今回はその階段状レイアウトを簡単に実装する方法についてご紹介します。

段組みしたコンテンツを階段状にずらして並べる方法

3段で並べる場合は、以下のようにします。

HTML

<div id="container">
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
</div>

CSS

#container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 5%;
}

.box {
	width: 30%;
}

.box:nth-child(3n+2) {
	margin-top: 50px;
}

.box:nth-child(3n+3) {
	margin-top: 100px;
}

左から順に、50pxずつズレて階段状に並びます。

ポイントはnth-childの指定で、3段に並べた2段目なら3n+2、3段目なら3n+3と指定します。

4段で階段状に並べてみる

4段に並べたい場合も、同じ要領で以下のようにします。

HTML

<div id="container">
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
	<div class"box"></div>
</div>

CSS

#container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4%;
}

.box {
	width: 22%;
}

.box:nth-child(4n+2) {
	margin-top: 50px;
}

.box:nth-child(4n+3) {
	margin-top: 100px;
}

.box:nth-child(4n+4) {
	margin-top: 150px;
}

まとめ

以上、段組みしたコンテンツを階段状にずらして並べる方法でした。

この方法であれば、コンテンツの件数が不特定でも自動で回り込んで階段状に並んでくれるので便利です。

使える場面は結構あると思うので、応用しつついろいろ試してみてください。