【まとめ】グリッドレイアウトの要素を揃える方法６選

読んで欲しい人

グリッドレイアウトを一通り学んだ人

要素の並べ方を思い出したい人

そんな方向けの内容です。

グリッド全体の、列方向の揃え方を決めます。

justify-content: start;　で列方向の揃えで、左揃えになります。

justify-content: end;　で列方向の揃えで、右揃えになります。

justify-content: center;　で列方向の揃えで、中央揃えになります。

justyfy-content: space-between;　で列方向の揃えで、余白が均等配置され両端揃えになります。

グリッド全体の、行方向の揃え方を決めます。

align-content: start;　で行方向の揃えで、上揃えになります。

align-content: end;　で行方向の揃えで、下揃えになります。

align-content: center;　で行方向の揃えで、中央揃えになります。

align-content: space-between;　で行方向の揃えで、余白が均等配置され両端揃えになります。

グリッド内での、要素の列方向の揃え方を決めます。

justify-items: start;　でグリッド内での列方向の揃えが、左揃えになります。

justify-items: end;　でグリッド内での列方向の揃えが、右揃えになります。

justify-items: center;　でグリッド内での列方向の揃えが、中央揃えになります。

justify-items: space-between;　でグリッド内での列方向の揃えが、余白が均等配置され両端揃えになります。

グリッド内での、要素の行方向の揃え方を決めます。

align-items: start;　でグリッド内での行方向の揃えが、上揃えになります。

align-items: end;　でグリッド内での行方向の揃えが、下揃えになります。

align-items: center;　でグリッド内での行方向の揃えが、中央揃えになります。

align-items: space-between;　でグリッド内での行方向の揃えが、余白が均等配置され両端揃えになります。

グリッド内での、個々の要素の列方向での揃えを決めます。

justyfy-self: start;なら、指定した要素だけが、グリッド内での列方向の揃えが左揃えになります。

justyfy-self: end;なら、指定した要素だけが、グリッド内での列方向の揃えが右揃えになります。

justyfy-self: center;なら、指定した要素だけが、グリッド内での列方向の揃えが中央揃えになります。

グリッド内での、個々の要素の行方向での揃えを決めます。

align-self: start;なら、指定した要素だけが、グリッド内での行方向の揃えが上揃えになります。

align-self: end;なら、指定した要素だけが、グリッド内での行方向の揃えが下揃えになります。

align-self: center;なら、指定した要素だけが、グリッド内での行方向の揃えが中央揃えになります。

グリッドレイアウトの揃え方は、大きく分けて３つあります。

１つ：グリッドレイアウトの枠を揃える。

２つ：グリッドレイアウトの枠内の要素を揃える。

３つ：グリッドレイアウトの枠の要素を個別に揃える。

使いこなせるように頑張って覚えましょう！

一緒に一歩踏み出しましょう♪

では♪