【Flexbox】ピンタレストのように比率の異なる画像を配置するレイアウト

CSS

縦横異なる比率の画像をピンタレストのように配置する、Frexboxを使ったレイアウトサンプル。

こんな感じです。

DEMO

HTML

<div class="flexbox">
	<div class="colum1">
		<!-- 左側に表示したい画像 -->
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample01.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample03.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample05.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample07.jpg" alt=""></a>texttext</div>
	</div>
	<div class="colum2">
		<!-- 右側に表示したい画像 -->
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample02.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample04.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample06.jpg" alt=""></a>texttext</div>
		<div><a href=""><img src="https://makingtheroad.net/wp-content/uploads/2020/09/sample08.jpg" alt=""></a>texttext</div>
	</div>
</div>

CSS

	.flexbox{
		width: 100%;
		display: flex;
		background-color: #fff;
		margin: 0;
		padding: 0;
	}
	.colum1,.colum2{
		width: 50%;
	}
	.colum1 div{
		padding: 0.5rem;
		margin: 0.8rem 0.2rem 0.4rem;
		background-color: #bcc7d7;
		text-align: center;
		color: #666;
	}
	.colum2 div{
		padding: 0.5rem;
		margin: 0.8rem 0.4rem 0.2rem;
		background-color: #bcc7d7;
		text-align: center;
		color: #666;
	}
	.colum1 img,.colum2 img{
		width: 100%;
		padding-bottom: 0.2rem;
	}

雑な書き方ですが、Flexboxを使えば、コーディング苦手だなっていう人でも簡単にできてしまうのでおすすめです。

コメント