CSS

グリッドや要素を揃える2

グリッドで各要素をまとめて配置する方法について。

  • justify-items
  • align-items

justify-items

・グリッドでもflex-boxで使ったjustify-itemsやalign-itemsを使うことができます。使い方はflex-boxのときと同様で親要素に指定することができて要素を各要素のグリッドの中でまとめて移動させることができます

フレックスボックスを作ってみよう

・グリッド内で列方向に要素をどう揃えるかのプロパティになります。初期値では左右への指定をすることができます。

・値はstart; でグリッド内で左揃え、 end; でグリッド内で右揃え、 center; で中央揃えになります。

align-items

・グリッド内で行方向に要素をどう揃えるかのプロパティになります。初期値だは上下での指定になります。

・値はstart; でグリッド内で上揃え、 end; で下揃え、 center; で中央揃えになります。

-広告-

 

 






-CSS