Gridレイアウトの余白・間隔のとり方

gridレイアウトの余白を設定

gridレイアウトではgrid-column・grid-row、またはgrid-areaプロパティをつかった個別の位置指定をしない限り、grid枠に従ってすきまなく順番に配置されます。

今回はgridレイアウトに余白、間隔を設定する方法です。

gridレイアウトに余白を設定する

余白の設定は非常にシンプルです。
横方向の余白はcolumn-gapプロパティ、縦方向にはrow-gapプロパティを使うのみ。

#{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 10px;
 row-gap: 30px;
}
 
 
 
 
 

リスト表示などシンプルなレイアウトであれば、column-gap・row-gapで十分こと足りると思います。

グリッドアイテムの間隔のとり方を設定

gridレイアウトの間隔のとり方はflexレイアウトと99%同じです。

justify-content・align-content

グリッドアイテムそのものの配置(間隔のとり方)は、水平方向:justify-content、垂直方向:align-contentでとります。
例・justify-content:end;

 
 
 

例2・align-content: center;

 
 
 

* align-content は、グリッドコンテナのheightよりも、アイテムの高さが小さいときに有効です。コンテナの高さが未指定・自動の場合は無効な値となります。

justify-content・align-contentでとれる値

start開始位置(初期値)
center中央寄せ
end終了位置
space-between等間隔配置。両端の外側に余白なし
space-around等間隔配置。両端の外側は半分の余白
space-evenly等間隔配置。両端の外側も等しく余白

justify-self・align-item・salign-self

グリッドアイテム内の配置についてはjustify-self(水平方向)、align-items (垂直方向)で指定します。
align-itemsを個別で、違う値を指定する場合は、align-selfを使います。

justify-self・align-itemsでとれる値

start開始位置
center中央
end終了位置

gridレイアウトの余白・間隔まとめ

flexレイアウトとgridレイアウト、それぞれの余白・間隔設定の違いは「flex-start」、「flex-end」の代わりに「start」「end」を使うぐらいです。

flexレイアウトを知っていれば何の問題もないので、詳しい説明は「flexの基本レイアウト」・「flexの基本レイアウトその2」をご覧ください。

 
最後に色々織り交ぜたサンプル掲載しておきます。文末に個々の解説つき。

See the Pen grid-layout-sample by Takashi Abe (@TakeshiAbe) on CodePen.

上のサンプルの解説

  • グリッドコンテナはwidth 500px、 height 400px。
  • grid-template-columnsとgrid-template-rowsで、100px3列、120px2行のグリッド枠。アイテムは80pxの正方形枠内に余白がある
  • row-gapで行間に10pxの余白。
  • justify-content:とalign-content: center で中央寄せ。
  • align-items: end なので、アイテムは枠の底辺に配置
  • justify-self: center を指定しているので、アイテムは水平方向中央。
  • 1つ目のアイテムにはjustify-self : start を個別指定しているので、開始位置(左端)に配置。
  • 3つ目のアイテムはmargin-leftで右寄せ。
  • 4つ目のアイテムは、align-self: start で枠内の最上部に配置

marginで左右余白を作る場合、どういう理屈か分かりませんが「1つ隣のセルを含んだ余白」となるので要注意です。

Gridレイアウトに関する記事

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月15日HTML/CSScss,display_grid,justify-content

Posted by ミフネWEB