display: grid;でアイテムの配置を調整する

display: grid;を使って要素の配置を簡単に調整するのを試してみた。

左右の中央揃えなら、margin: 0 auto;とかでもいいけど、縦を中央の揃えるのが手軽にできるのがいい。

こんな感じで配置元の要素にdisplay: grid;を設定して、place-content: center;を指定するとそれだけで上下中央揃えはできてしまう。

上記のサンプルではcontainerクラスが設定されている要素に追加で設定する。

.center {
  display: grid;
  place-content: center;
}

縦位置を下に寄せたいときはalign-content: endを設定すればOK

.bottom-center {
  display: grid;
  place-content: center;
  align-content: end;
}

ちなみにdiv要素とかで囲めないタグの中で縦配置をしたいときは以下のようにheightとline-heightの値を同じにすればできる。ラベルみたいな小さい要素なんかはこのパターンを使った方が配置のために無駄なタグを追加することなく済むので良さそう。

.item {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: #e198b4;
  vertical-align: middle;
  text-align: center;
}

この記事の環境情報