【簡単！】display:gridを使って上下/左右/中央揃えをしよう！【CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

１分で理解できるHTML/CSS講座シリーズです。

今回はdisplay:gridを使った上下・左右・中央揃えについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

gridを使って上下左右中央揃えしよう！

上下左右中央揃えにする構文1

display: grid;
place-items: center;

place-items: 上下 左右;

上下左右中央揃えにする構文2

display: grid;
align-items: center;
justify-items: center;

実際に動かしてみよう！

See the Pen
gridを使って上下 左右中央揃え by samehack (@samehack)
on CodePen.

gridを使って上下中央揃えしよう！

上下中央揃えにする構文1

display: grid;
align-items: center;

上下中央揃えにする構文2

display: grid;
place-items: center start;

実際に動かしてみよう！

See the Pen
gridを使って上下中央揃え by samehack (@samehack)
on CodePen.

gridを使って左右中央揃えしよう！

左右中央揃えにする構文1

display: grid;
justify-content: center;

左右中央揃えにする構文2

display: grid;
place-items: start center;

実際に動かしてみよう！

See the Pen
gridを使って左右中央揃え by samehack (@samehack)
on CodePen.

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram