nlog

とめどなく流れるよだれ

最低限の Grid Layout

css

f:id:namikuguri:20180120232823p:plain

CSS Grid Layout の熱が高まる昨今、基本的な使い方の紹介には飽きてる自分がいるが、その反面で人の記事を読むだけでは理解しきれていない自分がいる。そういうわけで、今回は Grid Layout の基本的な宣言の紹介を交えながら、ひとつデモをつくってみた。

Grid Layout をつくるのにつかったプロパティは以下の通り。すべてグリッドコンテナーを宣言した要素と同じ要素に指定する。

  • display ... グリッドコンテナーを宣言する
  • grid-template-columns ... 列を追加する
  • grid-template-rows ... 行を追加する
  • grid-column-gap ... 列の間の余白を取る
  • grid-row-gap ... 行の間の余白を取る

grid-template-columns や grid-template-rows には、グリッドコンテナー内の利用可能な空間の分数 (fraction) として、fr という値が使える。また、repeat() 記法を使うことで、以下のように繰り返し記述することを減らすことができる。

grid-template-columns: 1fr 1fr 1fr;

/* repeat() 記法を使う */
grid-template-columns: repeat(3, 1fr);