【CSS】gridで並べた要素を中央に寄せる方法をサクッとご紹介

今回は grid で並べた要素を中央に寄せる方法を紹介します。

親要素のなかに、複数の子要素をgridで並べたとき、
「中央に寄せたい」って思うときありますよね。

でも、どうやるの？

と思った方に紹介します。

サンプルコード

See the Pen
place-items:center;（none） by t.h (@tomtom15)
on CodePen.

この記事を見ている方はおそらくこの状態で困っていると思います。

４色の要素は上に寄っていますね。

それでは解決方法を見ていきましょう。

解決コード

See the Pen
place-items:center; by t.h (@tomtom15)
on CodePen.

解決コードはCSSに記載してある

place-items:center;

です。

上のコードペンでわかるとおり、４色の要素は中央に位置しています。

ちなみに、値については今回紹介したcenterの他にいろいろありますので、状況に応じて使い分けるといいと思います。

詳しくはこちら。

まとめ

いかがでしたでしょうか。
とっても簡単ですよね。

grid の中央寄せは

place-items:center;

です。

それではまた！

flexの中央寄せの記事も載せておきます！