シングルカラムレイアウトをCSS Gridで書くとmarginとさよなら出来て良い

記事作成日: 2019/03/04

CSSで中央寄せの1カラムレイアウトをしたい場合、例えばmarginを使って下記のような事をしていたと思う

.one-column-layout {
  margin: 0 auto;
  width: 700px
}

なんとなく言わんとしてる事はわかるのだが、「なんでここでmarginなんだ」ということはわりとモヤっとしたことは誰しもあるだろう。

CSS Gridを使うとこの点がもっと直感的に記述出来る

.one-column-layout {
  display: grid;
  grid-template-areas: 
    ". header  ."
    ". body    ."
    ". footer  .";
  grid-template-columns: 1fr 3fr 1fr;
}

templateの分で少々記述量は増えてしまうのはあるが、grid-template-columnsはそれぞれのカラム幅を定義していて非常に直感的だ。
またfrという単位もそれぞれの相対値で計算してくれるというのが良い。(fr単位について詳しくはこちら)

ただ、いまいちここは把握しきれていなのだが、使っていてたまに内容物がはみ出すケースがあった。
そういうときはminmaxを利用することで解決出来る。min-widthとmax-widthがかかっているのに近い挙動をしてくれる

.one-column-layout {
  display: grid;
  grid-template-areas: 
    ". header  ."
    ". body    ."
    ". footer  .";
  grid-template-columns: 1fr minmax(700px, 3fr) 1fr;
}