grid-template-columnsとgrid-columnの扱い方

グリッドレイアウトで、ヘッダー、コンテンツ、右サイドバー、フッターを作ってみて、そこからgrid-template-columnsとgrid-columnの扱い方を見てみようと思います

詳しい説明もつけます。CSSレイアウト初心者の方は参考になると思います。まず、完成画像はこちら。

すごく基本的なブログの記事画面って感じですよね。今回、レスポンシブにはなってないので、画面を拡大縮小すると、下記のリンク先のような感じになります。

それで、コードはこんな感じ、コピペすれば動くので試してみてください。

ここからが本題、なぜこういう風な動きになるのか理解をしていきましょう。

grid-template-columnsとは何か

グリットデザインの、grid-template-columnsとは、全体を縦のラインで区切ったレイアウトを予め作れるということです。

だから、grid-template-columns: auto; だと、下記のようになります。

grid-template-columns: auto auto;だと、こうなる。

grid-template-columns: auto auto auto;だとこうなる。

このように、grid-template-columns: とは、縦方向にラインが引けるというイメージで大丈夫です。

それで、最初に見せたゴールのようなレイアウトを作るためには、コンテンツ部分と、サイドバーの部分で、画面をに分割しないといけないですよね。

だから、二つのカラムが必要なので、grid-template-columns: auto auto;という風に書いたりするんですけれども、最初に貼り付けたコードには、

grid-template-columns: auto auto auto;となっていますよね。これはなんでかと言いますと、grid-template-columns: を指定しても、グリッドアイテムにもカラムを設定できるからなのです。

もしも、grid-template-columns: auto auto auto;となっているのであれば、ヘッダーの部分のグリッドアイテムを、下記のように定義します。

.item1 {
grid-column: 1 / 4;
}

そうすることで、一番左から、一番右まで伸びるレイアウトが作られます。これを、仮に下記のようにすると、

.item1 {
grid-column: 1 / 3;
}

こうなります。これは、grid-template-columns: auto auto auto;となっているからですね。全体に合わせて、グリッドカラムの大きさを調整する感じです。