SIRIUS（シリウス）をGridレイアウトにする前に

SIRIUS（シリウス）のテンプレートのパーツ

SIRIUS（シリウス）に付属している新デフォルトテンプレート、新ビジネステンプレート、新角丸テンプレートのテンプレートは、ヘッダー画像エリアを含むヘッダー部分、コンテンツを中心としたコンテンツ部分、メニュー部分、サブメニュー部分、フッター部分などにパーツを分けることができます。

実際に、新ビジネステンプレートで、３カラムのテンプレートをみてみると、こんな感じになります。

弁当箱に仕切り板を入れ、料理を入れていくGridレイアウト

CSS Gridレイアウトは、サイトという弁当箱を用意して、その弁当箱を縦横の仕切り板で区切り、その仕切り板で囲まれたところに、それぞれの素材料理を入れていくというようなイメージをすると、わかりやすいかもしれません。

wrapper という外枠があるお弁当箱に、縦横の仕切り板を入れます。
そこに、header、left、content、right、footeer という一品料理を入れていくイメージが、CSS Gridレイアウトのわかりやすいイメージかと思います。

つまり、弁当箱の中の仕切り板で区切られた区画に、どの一品料理を入れるかで、自由自在にレイアウトの組み合わせができることになります。

一品料理が入る仕切り板の幅も自由自在に変更できる

CSS Gridレイアウトでは、弁当箱の仕切り板の位置を、ちょこっとCSSの数値をいじるだけで、自由自在に変えることができます。

CSS Gridレイアウトでは、縦の仕切り線を column、横の仕切り線を row になり、この幅をCSSの記載で自由に変えることができるのです。

この例だと、縦の区画すなわち Column は、画面の幅が変わっても、左から、A％、B％、C％（合計で100％になるように設定）で調整されます。
横の区画すなわち Row に出てきている１frは、外枠の大きさに対して自動でグリッドを分割してそのサイズを調整する単位で、autoは、同じ列または行にfr単位がある場合、グリッドの中のコンテンツのサイズに合わせてグリッドサイズを調整してくれます。
また、％ではなくpxの値でも指定することができます。