CSS

Cascading Style Sheets grid-gap property.

grid-gap

　grid-gapプロパティとは、グリッドアイテム同士間の余白を指定します。行と列の余白を指定します、余白が付くのはグリッドアイテム同士間になるので、外側には余白が付きません。

　この2つのプロパティをまとめた、プロパティが grid-gap になります。

　書き方は以下のようになります。


display: grid / inline-grid;
grid-template: 値 / 値;
grid-gap: 行の値 列の値;

Sample 1

①
②
③
④
⑤
⑥
⑦
⑧
⑨

HTML source


<div class="sample1">
	<div>①</div>
	<div>②</div>
	<div>③</div>
	<div>④</div>
	<div>⑤</div>
	<div>⑥</div>
	<div>⑦</div>
	<div>⑧</div>
	<div>⑨</div>
</div>

CSS source


.sample1 {
	display: grid;
	grid-template-rows: 80px 100px 40px;
	grid-template-columns: 50px 100px 40px;
	grid-gap: 20px 5px;
	background-color: palegreen;
	margin: 10px;
}

.sample1 div {
	background-color: green;
	padding: 5px;
}

Sample 2

①
②
③
④
⑤
⑥
⑦
⑧
⑨

HTML source


<div class="sample2">
	<div>①</div>
	<div>②</div>
	<div>③</div>
	<div>④</div>
	<div>⑤</div>
	<div>⑥</div>
	<div>⑦</div>
	<div>⑧</div>
	<div>⑨</div>
</div>

CSS source


.sample2 {
	display: grid;
	grid-template-rows: 80px 100px 40px;
	grid-template-columns: 50px 100px 40px;
	grid-gap: 5px 20px;
	background-color: palegreen;
	margin: 10px;
}

.sample2 div {
	background-color: green;
	padding: 5px;
}