【CSS】グリッドレイアウトで要素の余白を設定する方法

2019年6月12日CSS,グリッドレイアウト

グリッドレイアウトで要素の余白を設定するには「grid-gap」または「grid-column-gap」「grid-row-gap」を指定します

  • 「grid-column-gap」は横方向（並べる方向）
  • 「grid-row-gap」は縦方向（交差する方向）
  • 「grid-gap」は縦横を同時に設定できます

「grid-gap」で要素の余白を指定する

「grid-gap」は値がひとつであれば縦横同じ幅の余白が指定されます

別々に指定する場合は「grid-gap:値 値」となりますが、横方向のレイアウトをしている場合は「横 縦」ではなく「縦 横」で指定します

.sample{
 background:#E1F5FE;
 margin:10px;
 display: grid;
 grid-template-columns: repeat(3,120px);
 grid-gap: 10px 20px;/*縦余白px 横余白pxで指定できる*/
}
.sample p{
margin:0;/*pの持つ余白を0に*/
background:#4E342E;
color:#FFF;
/*以下テキストの中央揃え用*/
display:flex;
justify-content: center;
align-items:center;
}

A

B

C

D

E

F

G

H

I

J

指定する値はpx、パーセント、emなど

他には「initial（受け継ぐ）」「inherit（初期化）」「unset（初期化）」も値として指定できます

2019年6月12日CSS,グリッドレイアウト

Posted by Yousuke.U