CSS Grid Layout について #CSS

先日の macOS と iOS のアップデートに CSS Grid Layout Module が実装された Safari のバージョンが入り、とうとう全てのモダンブラウザで使用可能となりました。非常に柔軟に、直感的にグリッドを表現することができます。

Can I Use

Grid の定義

ある要素をグリッドレイアウトしたいとき、その親要素に display: grid もしくは display: inline-grid を指定します。この親要素のことをグリッドコンテナ、グリッドレイアウトされる子要素のことをグリッドアイテムと言います。

グリッドコンテナには grid-template-column と grid-template-row というプロパティを指定することができます。それぞれ、列と行のグリッドのサイズをその数だけ指定します。

例: 3行5列のグリッド

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

グリッドコンテナに指定できるプロパティ

## Grid の定義 で紹介したプロパティ以外のグリッドコンテナに指定できるよく使うプロパティの紹介です。

grid-gap

正確には grid-gap は grid-column-gap と grid-row-gap のショートハンドです。グリッドアイテム間の列と行の間の余白を指定します。

例: 列は10px, 行は15pxの余白

.container {
  grid-gap: 10px 15px;
}

justify-items, align-items, justify-content, align-content

これらは Flexbox レイアウトでも使ったプロパティです。仕様的にはこれらは Flexbox のものではなく、 Box Alignment Module という仕様で、グリッドコンテナに対しても使えます。

グリッドアイテムを整列させるプロパティで、CSS Grid で使われる新しいものではないので使い方は省略します。

grid-template-areas

グリッドアイテムに対して名前を付けるプロパティです。覚える必要はありません。

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

書き方がめちゃくちゃ気持ち悪いです。. は空のグリッドに指定します。

グリッドアイテムに指定できるプロパティ

グリッドコンテナの子要素、実際にグリッドレイアウトされるグリッドアイテムに対して指定できるプロパティの紹介です。ちなみに、グリッドアイテムには float, clear, vertical-align は適用されません。

grid-column, grid-row

grid-template-column と grid-template-row　でグリッドを定義し、どの要素をどこに配置するかを決定するのがこれらのプロパティです。正確には、 grid-column は grid-column-start と grid-column-end のショートハンドで、 grid-row は grid-row-start と grid-row-end のショートハンドです。また、 grid-area という、grid-column と grid-row のショートハンドもありますが、grid-column と grid-row　だけ使うのがわかりやすいと思います。

これらのプロパティはグリッドラインを指定します（Line-based Placement と呼ばれたりもします）。

grid-column では列の、grid-rowでは行のスタートラインとエンドラインを指定します。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
}

.item-a {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item-b {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

justify-self, align-self

これも Flexbox レイアウトのときもありました。指定したグリッドアイテムを整列されるプロパティです。

参考資料

余談

"グリッド"は、今までも <table>タグ, float, display: inline-block, display: table, Flexbox などを使って表現することができました。しかし、CSS Grid というグリッドのための仕様が作られ、プリプロセッサーの mixin やグリッドのためのフレームワークを使わなくても、グリッドを作れるようになりました。僕は、CSS Grid が使える1番の恩恵は、display: grid と書くことでグリッドが表現でき、コードにデザインの意図が載ることだと思っています。あと、CSS Grid のプロパティも Flexbox のときのように、グリッドコンテナとグリッドアイテムのどちらのプロパティなのかを意識すると覚えやすいと思います。

ちなみに、display: subgrid という、グリッドアイテムをグリッドコンテナにし、その子要素をグリッドレイアウトするための値もありますが、これは Level 2 の仕様に移動し、現在 Firefox 以外では実装されていません。今後は、グリッドを表現するときは CSS Grid、コンポーネント内のレイアウトは Flexbox という使い方が良いと思います。