ブロックチェーン・AI・システム開発の株式会社INDETAIL

続・CSS Grid Layoutの基本を理解する

2018.02.26
rockd

今回は以前紹介したCSSグリッドレイアウトについての話の続きになります。
まだご覧になっていない方はこちらから。

前回のおさらい

前回はグリッドコンテナーからグリッドアイテムを配置し、2カラムレイアウトを作成しました。
ソースコードは下記になります。

grid-template-columns や grid-template-rows を使ってグリッドラインを作り、
grid-columngrid-row でグリッドラインのどこからどこまで配置するかを指定してグリッドアイテムの場所を決定しました。
実はこの方法以外にも別な書き方で指定することができます。

別な書き方でグリッドアイテムを指定する

セルの数(スパン)を使う

上記の例では、グリッドラインの最初と最後を指定していましたが、span を使うとラインで区切ったセルの数で指定することができます。
例えば、grid-column: 1 / 3; のような指定は grid-column: 1 / span 2; という風に1番目のラインから2セル分という書き方になります。

columnとrowを一括で指定する

grid-columngrid-row の内容は grid-area というプロパティを使えば一行で指定することができます。

今回のheaderの場合は下記のようになります。

グリッドアイテムに名前をつけて指定する

ラインの場所を把握して書くのは正直、直感的には分かりにくいところがあります。
そんな時は一括指定のときにも使った grid-area を使ってグリッドアイテムに名前をつけてみましょう。

grid-area プロパティには一括指定以外にも、このように名前をつけることができます。
ただしこれだけでは正しく表示されません。

グリッドコンテナーに grid-template-areas というプロパティを指定し、グリッドアイテムの位置を決めます。
2カラムレイアウトの状態に戻すには下記のように書きます。

名前は grid-area で指定した名前です。
ダブルクォーテーションで囲まれた部分が行で、列は名前の間に入る半角スペースで区切ります。
headerとfooterは2列分を連結させたいので同じ名前を書いています。
実際の結果は下記になります(わかりやすくブロック内に名前のテキストをいれました)

アウトプットの見栄え的には変わらないですが、グリッドアイテムが少ない場合はこの書き方のほうがぱっと見た時に直感的な気がします。

【オマケ】CSSグリッドレイアウトを気軽に学べるGRID GARDEN

http://cssgridgarden.com/
Webブラウザ上でCSS Gridを学ぶことができます。
内容も簡単なので興味がある方は是非遊んでみてください。

終わりに

今回は前回の内容を踏まえて別な指定の仕方もあるよというご紹介でした。
次回はレスポンシブなレイアウトや、より複雑なレイアウトを作成してみたいと思います。

rockd

エンジニア。 最近はフロントエンドを担当することが多い。 たまにデザインをすることもある。 インドアな見た目とは裏腹に意外とアウトドア。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。