【余白指定】gridとflexでgapの余白を指定する方法

gridとflexで余白指定を簡単に指定する方法があります。

それはgapです。

gapを使うことで余白の指定も簡単です。

いままでmarginなどを使用していましたがgapだととても便利です。

gapの余白指定

html

<div class="box">
	<ul>
		<li>テキスト</li>
		<li>長いテキスト</li>
		<li>ABC</li>
	</ul>
</div>

css

gapの指定は1つ目が行間、2つ目が列間になります。

個別に指定する場合はrow-gap、column-gapを使用します。

.box ul{
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 10px;	
}
.box ul li{
	list-style: none;
	padding: 10px;
	border-radius: 4px;
	border: solid 1px #eee;	
}

画面サンプル