LOGv:20171214

CSS Grid

構造の意味合いを崩さずにテーブルの様にレイアウトが可能なCSS Gridが便利そうだったので触ってみた。

CSS Grid サンプル

内容をまとめるとこんな感じ。

  • flexboxが1次元的なレイアウト(起点からの上下左右)に対しgridは2次元的なレイアウト(左右と上下)で指定する
  • 「display : grid」でグリッドコンテナという格子を作る
  • 格子の行の数と高さ、列の数と幅は「grid-template-rows」と「grid-template-columns」で指定する
  • 高さか幅を指定すれば、数はわかるため、行は「grid-template-rows : 10px 10% 1fr」のように上から始まる各行の高さを指定し、列は「grid-template-columns : 10px 10% 1fr」のように左から始まる各列の幅を指定する
  • 行列の指定によって区切られた区切り線をグリッド線といい、2つのグリッド線の間にある空間をグリッドトラックという
  • グリッドトラックはグリッド線の間にある空間なので行トラックと列トラックがある
  • 単位frは「グリッドコンテナ内での利用可能な空間」を表す
  • grid-template-rows|columnsの指定ではrepeat()記法を用いた繰り返しの指定ができる。これは部分適用も出来る
  • ラインにはグリッドの左上から1から大きくなる連番、グリッドの右下から-1から小さくなる連番が振られている
  • 2つの行のグリッド線と2つの列のグリッド線からなる最小の辺をグリッドセルという
  • グリッドセルはアイテムを配置出来る最小単位である
  • グリッドセルの集合をグリッドエリアという
  • アイテムの配置は「grid-row-start」「grid-row-end」(これらのショートハンドは「grid-row」)と「grid-column-start」「grid-column-end」(これらのショートハンドはgrid-column)でライン番号を指定する
  • 「grid-row」と「grid-column」のショートハンドは「grid-area」
  • 「grid-template-areas」でエリアに名前をつけることが出来る。アイテムには「grid-area」で名前を指定する
  • 「grid-template-xxx」のショートハンドとして「grid-template」がある
  • ほぼ一括で指定出来る「grid」というプロパティがあるが初期値が他のものと異なる

雑感:ショートハンドが多い

open close